Android Bildansicht blur animation
Ich bin auf der Suche zum hinzufügen eines blur animation zu einem ImageView
, aber mit einer festgelegten Dauer. Also, zum Beispiel möchte ich ein Bild zu verwischen, der sich im Laufe der Zeit.
Ich habe bereits die Methode zu verwischen das Bild, aber was ich brauche, ist, es zu machen, gehen von blur zu keiner Unschärfe über, sagen wir, 2 Sekunden.
Kann mir jemand helfen?
EDIT: Das ist die Methode, die ich derzeit habe, zu verwischen das Bild.
public Bitmap blur(Bitmap sentBitmap, int radius) {
//Stack Blur Algorithm by Mario Klingemann <[email protected]>
Bitmap bitmap = sentBitmap.copy(sentBitmap.getConfig(), true);
if (radius < 1) {
return (null);
}
int w = bitmap.getWidth();
int h = bitmap.getHeight();
int[] pix = new int[w * h];
Log.e("pix", w + " " + h + " " + pix.length);
bitmap.getPixels(pix, 0, w, 0, 0, w, h);
int wm = w - 1;
int hm = h - 1;
int wh = w * h;
int div = radius + radius + 1;
int r[] = new int[wh];
int g[] = new int[wh];
int b[] = new int[wh];
int rsum, gsum, bsum, x, y, i, p, yp, yi, yw;
int vmin[] = new int[Math.max(w, h)];
int divsum = (div + 1) >> 1;
divsum *= divsum;
int dv[] = new int[256 * divsum];
for (i = 0; i < 256 * divsum; i++) {
dv[i] = (i / divsum);
}
yw = yi = 0;
int[][] stack = new int[div][3];
int stackpointer;
int stackstart;
int[] sir;
int rbs;
int r1 = radius + 1;
int routsum, goutsum, boutsum;
int rinsum, ginsum, binsum;
for (y = 0; y < h; y++) {
rinsum = ginsum = binsum = routsum = goutsum = boutsum = rsum = gsum = bsum = 0;
for (i = -radius; i <= radius; i++) {
p = pix[yi + Math.min(wm, Math.max(i, 0))];
sir = stack[i + radius];
sir[0] = (p & 0xff0000) >> 16;
sir[1] = (p & 0x00ff00) >> 8;
sir[2] = (p & 0x0000ff);
rbs = r1 - Math.abs(i);
rsum += sir[0] * rbs;
gsum += sir[1] * rbs;
bsum += sir[2] * rbs;
if (i > 0) {
rinsum += sir[0];
ginsum += sir[1];
binsum += sir[2];
} else {
routsum += sir[0];
goutsum += sir[1];
boutsum += sir[2];
}
}
stackpointer = radius;
for (x = 0; x < w; x++) {
r[yi] = dv[rsum];
g[yi] = dv[gsum];
b[yi] = dv[bsum];
rsum -= routsum;
gsum -= goutsum;
bsum -= boutsum;
stackstart = stackpointer - radius + div;
sir = stack[stackstart % div];
routsum -= sir[0];
goutsum -= sir[1];
boutsum -= sir[2];
if (y == 0) {
vmin[x] = Math.min(x + radius + 1, wm);
}
p = pix[yw + vmin[x]];
sir[0] = (p & 0xff0000) >> 16;
sir[1] = (p & 0x00ff00) >> 8;
sir[2] = (p & 0x0000ff);
rinsum += sir[0];
ginsum += sir[1];
binsum += sir[2];
rsum += rinsum;
gsum += ginsum;
bsum += binsum;
stackpointer = (stackpointer + 1) % div;
sir = stack[(stackpointer) % div];
routsum += sir[0];
goutsum += sir[1];
boutsum += sir[2];
rinsum -= sir[0];
ginsum -= sir[1];
binsum -= sir[2];
yi++;
}
yw += w;
}
for (x = 0; x < w; x++) {
rinsum = ginsum = binsum = routsum = goutsum = boutsum = rsum = gsum = bsum = 0;
yp = -radius * w;
for (i = -radius; i <= radius; i++) {
yi = Math.max(0, yp) + x;
sir = stack[i + radius];
sir[0] = r[yi];
sir[1] = g[yi];
sir[2] = b[yi];
rbs = r1 - Math.abs(i);
rsum += r[yi] * rbs;
gsum += g[yi] * rbs;
bsum += b[yi] * rbs;
if (i > 0) {
rinsum += sir[0];
ginsum += sir[1];
binsum += sir[2];
} else {
routsum += sir[0];
goutsum += sir[1];
boutsum += sir[2];
}
if (i < hm) {
yp += w;
}
}
yi = x;
stackpointer = radius;
for (y = 0; y < h; y++) {
//Preserve alpha channel: ( 0xff000000 & pix[yi] )
pix[yi] = ( 0xff000000 & pix[yi] ) | ( dv[rsum] << 16 ) | ( dv[gsum] << 8 ) | dv[bsum];
rsum -= routsum;
gsum -= goutsum;
bsum -= boutsum;
stackstart = stackpointer - radius + div;
sir = stack[stackstart % div];
routsum -= sir[0];
goutsum -= sir[1];
boutsum -= sir[2];
if (x == 0) {
vmin[y] = Math.min(y + r1, hm) * w;
}
p = x + vmin[y];
sir[0] = r[p];
sir[1] = g[p];
sir[2] = b[p];
rinsum += sir[0];
ginsum += sir[1];
binsum += sir[2];
rsum += rinsum;
gsum += ginsum;
bsum += binsum;
stackpointer = (stackpointer + 1) % div;
sir = stack[stackpointer];
routsum += sir[0];
goutsum += sir[1];
boutsum += sir[2];
rinsum -= sir[0];
ginsum -= sir[1];
binsum -= sir[2];
yi += w;
}
}
Log.e("pix", w + " " + h + " " + pix.length);
bitmap.setPixels(pix, 0, w, 0, 0, w, h);
return (bitmap);
}
Warum gehst du nicht zeigen Sie uns, was Sie bereits haben? Wenn wir zu erraten, was Sie bereits versucht, Sie sind nur machen es schwieriger für uns, um Ihnen eine gute Antwort.
Sobald Sie können, zeigen Sie mir den code, die Sie verwenden, um die Unschärfe des Bildes kann ich Ihre Frage beantworten. Schreiben Sie einfach einen Kommentar hier mit @XaverKapeller zu Benachrichtigen, nachdem Sie bearbeitet Ihre Frage.
Danke für die Hilfe @XaverKapeller. Ich aktualisiert meine Antwort, während Sie auf den bus in die Arbeit tis morgen, und hatte deshalb auch noch keinen code zur hand, aber jetzt habe ich die Methode verwendet, um Unschärfe der Bitmap für Sie zu sehen.
Ich sehe, Sie sind mit Stackblur. Das ist völlig in Ordnung, nur der Vollständigkeit halber: Mit Renderscript Sie ziemlich viel, Holen Sie sich die besten blur-Effekte, aber es sei denn, es ist eine Notwendigkeit für Sie, sollten Sie nicht wechseln. Stackblur ist gut genug. Ich werde einige Zeit brauchen, um zu testen, ein paar Dinge, und schreiben Sie die Antwort.
Diese Unschärfe-Algorithmus ist leider ziemlich langsam, man kann nicht zuverlässig blur bitmap in Echtzeit-es sei denn, die bitmap ist sehr klein. Wenn Sie möchten, verwenden diesen Algorithmus, sollten Sie verwischen alle Bilder, die Sie Weichzeichnen möchten, im Vorfeld und als cross-fade-die unscharfen und unverpixelte version.
Sobald Sie können, zeigen Sie mir den code, die Sie verwenden, um die Unschärfe des Bildes kann ich Ihre Frage beantworten. Schreiben Sie einfach einen Kommentar hier mit @XaverKapeller zu Benachrichtigen, nachdem Sie bearbeitet Ihre Frage.
Danke für die Hilfe @XaverKapeller. Ich aktualisiert meine Antwort, während Sie auf den bus in die Arbeit tis morgen, und hatte deshalb auch noch keinen code zur hand, aber jetzt habe ich die Methode verwendet, um Unschärfe der Bitmap für Sie zu sehen.
Ich sehe, Sie sind mit Stackblur. Das ist völlig in Ordnung, nur der Vollständigkeit halber: Mit Renderscript Sie ziemlich viel, Holen Sie sich die besten blur-Effekte, aber es sei denn, es ist eine Notwendigkeit für Sie, sollten Sie nicht wechseln. Stackblur ist gut genug. Ich werde einige Zeit brauchen, um zu testen, ein paar Dinge, und schreiben Sie die Antwort.
Diese Unschärfe-Algorithmus ist leider ziemlich langsam, man kann nicht zuverlässig blur bitmap in Echtzeit-es sei denn, die bitmap ist sehr klein. Wenn Sie möchten, verwenden diesen Algorithmus, sollten Sie verwischen alle Bilder, die Sie Weichzeichnen möchten, im Vorfeld und als cross-fade-die unscharfen und unverpixelte version.
InformationsquelleAutor Fifer Sheep | 2014-07-18
Du musst angemeldet sein, um einen Kommentar abzugeben.
Blur-Effekte sind immer schwierig auf Android. Im wesentlichen müssen Sie entscheiden zwischen Aussehen und Leistung. Je besser die Unschärfe aussieht, je länger es dauert, und wenn die Trübung selbst ist nicht augenblicklich, dann können Sie nicht wirklich animieren die Unschärfe.
Ursprünglichen Unschärfe-Algorithmus produziert wirklich gute Ergebnisse, aber da ist es auch sehr langsam, wodurch eine Unschärfe animation unmöglich. Nur um zu zeigen, was es dauern würde, um effektiv zu verwischen dieses Bild habe ich einen einfachen blur animation durch die Skalierung der bitmap-down:
Funktioniert das ganz gut (auch wenn es noch etwas Verzögerung), aber die Ergebnisse können nicht verglichen werden mit Ihrem blur-Algorithmus, es sieht einfach schrecklich:
Also Sie sehen, es ist sehr schwer zu vereinen Leistung und Optik, wenn es um die Verwischung ein Bild, aber es gibt einige Optionen, die in Erster Linie
RenderScript
.RenderScript
ist sehr schnell und hat einen eingebauten GAUSS-blur-filter. Ich habe es nie benutzt, aber von dem, was ich höre, könnte es die Lösung für Ihr problem.Können Sie auch versuchen, zu laden, die bereits verkleinerte Versionen eines Bildes, das würde produzieren die gleiche Wirkung wie in dem gif oben, wäre aber noch schneller. Der Nachteil ist, dass mit dieser in einem
Animation
ist wieder problematisch, aber wenn man nur ein unscharfes Bild und man weiß nicht wirklich, was Qualität ist, dann sollten Sie gehen für diese option.Finden Sie weitere Informationen überin dieser Antwort
RenderScript
und andere fast-blur-OptionenInformationsquelleAutor Xaver Kapeller
Werde ich nicht verlängern, meine Antwort zu viel mit code, da ich ehrlich gesagt nicht, aber ich werde versuchen die wichtigsten Dinge, die Sie berücksichtigen müssen und ein paar nützliche links.
erste, der Ansatz:
Unschärfe so schnell wie möglich:
Ihren Algorithmus sieht wirklich schön und ich glaube, es gibt einen guten Effekt, aber die Realität ist, dass es läuft in der Java VM in einem einzigen thread. Sie werden für absolut sicher, haben eine viel bessere Leistung mit RenderScript. Das ist, weil RenderScript auto-skaliert das rendering auf multi-Prozessor und der GPU.
der Basis-code ist unten, aufgenommen direkt von android-developers.blogspot.com:
cache die unscharfen Ergebnisse:
Weil Blur braucht Zeit. Es wird auch eine Menge Speicher, Auswirkungen auf, und Sie müssen sehen Sie es sorgfältig. Sie wird sicherlich nicht in der Lage sein, es zu tun sehr gut in eine Liste, die recycling-Ansichten und so. Ein Tipp vielleicht, ist die Verwendung
Picasso
Bibliothek ( LINK ), und auch mit Ihren threading. So etwas wie dieses:cross-fade:
hier ist, wo Sie die balance zwischen Leistung und tolles Aussehen. Die Realität ist, dass ein real animation ist unmöglich, ohne Rendern jeder frame für jeden Schritt, aber mit einem cross-fade zwischen ein paar key-frames können Sie hervorragende Ergebnisse erzielen.
Wie viele key-frames, die Sie verwenden werden, hängt von der Leistung, die Sie wollen, die Menge des freien Speichers auf dem Gerät, etc.
Wenn Sie sind fein mit nur 2 key-frames (1 nicht verschwommen und 1 Total unscharf) kann man wohl anwenden TransitionDrawable. Wenn Sie möchten, eine feinere suchen, Effekt Sie haben werden, um eine Reihe von cross-fade-übergänge oder wahrscheinlich erstellen Sie Ihre eigenen benutzerdefinierten drawable.
nur für 2 key-frames können Sie sehen, ein Beispiel auf der Yahoo Wetter-app, wenn Sie möchten, um ein Beispiel zu sehen mit ein paar key-frames, die Sie überprüfen möchten Muzei live wallpaper.
sehr nützliche links*
Auf den folgenden link, Sie werden sehen, eine schöne Diskussion, die von Muzei Schöpfer (Roman Nurik, das ist auch einer der Ingenieure bei Google arbeiten bei Android) wie erreicht er die key-frames, warum das ist der einzige Weg, es zu tun und warum, obwohl komplexer code, der schafft es am Ende eine viel schönere Ergebnis: (kurze version) https://plus.google.com/+RomanNurik/posts/2sTQ1X2Cb2Z (vollständige version) https://medium.com/@romannurik/serendipitous-ideas-3a1721a6f716
Diesem link ist der Quellcode für Muzei live-wallpaper, wo Sie können überprüfen, wie er berechnet den key-frames und animiert wallpaper: https://github.com/romannurik/muzei
Glück und happy coding!
InformationsquelleAutor Budius
Verwischen sich viel Zeit nimmt, auch auf neuen Geräten. Die Animation der Unschärfe würde noch schlimmer werden. RenderScript würde nicht viel helfen, entweder. Ihre beste Wette ist, um den cross-fade zwischen einem unscharfen und nicht-unscharfe Bilder:
Hinweis: Die crossfade-code wurde entnommen aus: Quelle (animiert auf klicken)
Andere Möglichkeit die ich mir denken kann, dies zu tun, ist die Verwendung von JQuery und animieren die Unschärfe innerhalb eines WebView.
InformationsquelleAutor Simas
//diese Unschärfe Methoden
InformationsquelleAutor Cüneyt
Ich bin ein bisschen spät zur party, aber wenn ich unstderstand Sie richtig Sie wollen "fade in der Unschärfe", so dass es erhöht cnstantly?
Können Sie erreichen diesen Effekt durch stapeln von zwei ImageViews übereinander. Die untere zeigt die unberührte Bild, die Obere eine blured man die pre-rendered. Die oberen muss man unsichtbar (alpha=0f). Neben Ihr verblassen in der oberen Bildansicht und fade-out der untere Bildansicht. Dies wird Ihnen die gewünschte Wirkung. Sie können die Wirkung durch das spielen mit den timings und transperancies.
Glück 🙂
InformationsquelleAutor crysxd