[JAVA] Vergleich der Implementierung der Produktion, die Bilder auf iOS und Android zum Leuchten bringt

Da die in der iOS-Version erstellte Animationsproduktion auf die Android-Version portiert wurde, werde ich diese Zeit als Memorandum belassen.

iOS-Version fertiges Produkt

• Für GIF warten wir auf den Abschluss der Animation. In diesem Artikel wird jedoch nur beschrieben, wie ein leuchtendes Bild generiert und eine einzelne Animation implementiert wird.
• Die Android-Version hat kein GIF, aber es wird fast das gleiche sein. Zum Schluss über den Unterschied.

Ablauf der Animationsausführung

Das fertige GIF wird wie folgt verarbeitet.

1. Platzieren Sie ein normales Bild
2. Verarbeiten Sie ein normales Bild, um ein glänzendes Bild zu erzeugen
3. Fügen Sie das in ↑ erzeugte leuchtende Bild an derselben Position wie das normale Bild hinzu, wobei der Alpha-Wert auf 0 gesetzt ist (Überlagerung oben).
4. Zeigen Sie ein normales Bild mit Einblend- und Skalierungsanimation an
5. Wenn die Animation von ↑ beendet ist, zeigen Sie das leuchtende Bild beim Einblenden an
6. Wenn die Animation von ↑ beendet ist, löschen Sie das leuchtende Bild mit der Animation zum Ausblenden und Skalieren.

Unten finden Sie die wichtigsten iOS- und Android-Codes. Ich lasse die Teile weg, die nicht geschrieben werden müssen.

• Die Android-Version verwendet ViewAnimator. https://github.com/florent37/ViewAnimator

Generieren Sie ein leuchtendes Bild

iOS(Swift)

//Mischen Sie Weiß mit dem Originalbild im HardLight-Modus
let image = UIImage.imageFromAsset(name: "stamp_complete")?
                .colorizeImage(color: UIColor.white, blendMode: CGBlendMode.hardLight)

//Methode zum Mischen
public func colorizeImage(color: UIColor, blendMode: CGBlendMode = CGBlendMode.plusLighter) -> UIImage? {
    UIGraphicsBeginImageContextWithOptions(self.size, false, 0)
    let context = UIGraphicsGetCurrentContext()
    let rect    = CGRect(origin: CGPoint.zero, size: self.size)
    context?.scaleBy(x: 1, y: -1)
    context?.translateBy(x: 0, y: -rect.size.height)
    context?.saveGState()
    context?.clip(to: rect, mask: self.cgImage!)
    color.set()
    context?.fill(rect)
    context?.restoreGState()
    context?.setBlendMode(blendMode)
    context?.draw(self.cgImage!, in: rect)
    let colorizedImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return colorizedImage   
}

Android(Java)

ImageView glowView = new ImageView(getContext());
glowView.setLayoutParams(new RelativeLayout.LayoutParams(
        LayoutParams.WRAP_CONTENT,
        LayoutParams.WRAP_CONTENT
));
//Stellen Sie das Originalbild ein
glowView.setImageResource(R.drawable.stamp_star);
glowView.setAdjustViewBounds(true);
//Filtern Sie, um das Bild aufzuhellen
ColorFilter filter = new LightingColorFilter(Color.rgb(255, 255, 255), Color.rgb(100, 100, 100));
glowView.setColorFilter(filter);

Unter iOS wird UIImage selbst verarbeitet, unter Android wird jedoch die Filtermethode von ImageView verwendet.

Zeigen Sie normale Bilder mit Einblenden + Verkleinern an

iOS(Swift)

//Aussehensanimation(Skalieren)
//Im Voraus schrumpfen
stampView.transform = CGAffineTransform(scaleX: 0.01, y: 0.01)
UIView.animate(withDuration: 0.3,
               delay: delay,
               usingSpringWithDamping: 0.5,
               initialSpringVelocity: 1.0,
               options: [.beginFromCurrentState],
               animations: {
                //Zurück zur Originalgröße
                stampView.transform = CGAffineTransform.identity
},
               completion: { (finished) in
})

//Aussehensanimation(Einblenden)
let alphaAnim = CABasicAnimation(keyPath: "opacity")
alphaAnim.duration  = 0.15
alphaAnim.toValue   = 1.0
alphaAnim.fillMode  = kCAFillModeForwards
alphaAnim.isRemovedOnCompletion = false
CATransaction.begin()
CATransaction.setCompletionBlock {
}
stampView.layer.add(alphaAnim, forKey: "stamp")
CATransaction.commit()

Android(Java)

//Darstellungsanimation (Skalieren + Einblenden)
ViewAnimator.animate(view)
        .fadeIn()
        .duration(150)
        .andAnimate(view)
        .scale(0, 1)
        .duration(200)
        .interpolator(new BounceInterpolator())
        .onStop(() -> {
        })
        .start();

Lockerung ist jede Methode, daher ist sie nicht vollständig. Die Android-Version kann dank einer schönen Bibliothek namens ViewAnimator ordentlich geschrieben werden.

Einblendanzeige leuchtender Bilder

iOS(Swift)

UIView.animate(withDuration: 0.15, delay: delay, options: [.beginFromCurrentState, .curveLinear], animations: {
    imageView.alpha = 1
}, completion: { (finished) in
    UIView.animate(withDuration: 0.3, delay: delay, options: [.beginFromCurrentState, .curveEaseOut], animations: {
        imageView.transform = CGAffineTransform(scaleX: 1.8, y: 1.8)
        imageView.alpha     = 0
    }, completion: { (finished) in
    })
})

Android(Java)

ViewAnimator.animate(view)
        .onStart(() -> {
            view.setVisibility(VISIBLE);
        })
        .fadeIn()
        .duration(150)
        .thenAnimate(view)
        .scale(1.0f, 1.8f)
        .fadeOut()
        .interpolator(new DecelerateInterpolator())
        .duration(300)
        .onStop(() -> {
        })
        .start();

Unterschiede zwischen iOS-Version und Android-Version

Lockerung

Die Lockerung der vergrößerten Animation bei der Anzeige der Sterne ist unterschiedlich, da jede Methode verwendet wird. Ich denke, dass es ausgerichtet wird, wenn Sie Feineinstellungen vornehmen. (Verwenden Sie Bounce Interporator unter Android und animateWithSpringDumping unter iOS.)

Bild des verarbeiteten Sterns

Ich habe das Gefühl, dass Weiß unter iOS stärker ist, daher denke ich, dass es näher kommt, wenn Sie Feineinstellungen vornehmen.

Impressionen

Wenn Sie ein leuchtendes Bild vorbereiten können, ist keine Verarbeitung erforderlich. Wenn Sie es jedoch dynamisch ändern können, ist es praktisch, wenn Sie verschiedene Dinge ausprobieren oder Feineinstellungen vornehmen möchten. Der Code wird extrahiert und teilweise platziert. Wenn also etwas nicht stimmt, lassen Sie es mich bitte wissen.