[JAVA] Comparaison de l'implémentation de la production qui fait briller les images sur iOS et Android

Étant donné que la production d'animation réalisée dans la version iOS a été portée sur la version Android, je laisserai cette fois-là un mémorandum.

Produit fini version iOS

• Pour le gif, nous attendons la fin de l'animation, mais dans cet article, nous ne décrirons que comment générer une image éclatante et comment implémenter une seule animation.
• La version Android n'a pas de gif, mais ce sera presque la même chose. Enfin sur la différence.

Flux d'exécution de l'animation

Le gif fini est traité comme suit.

1. Placez une image normale
2. Traitez une image normale pour générer une image brillante
3. Ajoutez l'image brillante générée dans ↑ à la même position que l'image normale avec la valeur alpha définie sur 0 (superposition en haut)
4. Afficher une image normale avec une animation de fondu d’entrée et de mise à l'échelle
5. Lorsque l'animation de ↑ est terminée, affichez l'image lumineuse en fondu
6. Lorsque l'animation de ↑ est terminée, effacez l'image rougeoyante avec l'animation de fondu de sortie + échelle de sortie.

Vous trouverez ci-dessous les principaux codes iOS et Android. J'omets les parties qui n'ont pas besoin d'être écrites.

• La version Android utilise ViewAnimator. https://github.com/florent37/ViewAnimator

Générer une image éclatante

iOS(Swift)

//Mélangez le blanc avec l'image originale en mode HardLight
let image = UIImage.imageFromAsset(name: "stamp_complete")?
                .colorizeImage(color: UIColor.white, blendMode: CGBlendMode.hardLight)

//Méthode de mélange
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
));
//Définir l'image d'origine
glowView.setImageResource(R.drawable.stamp_star);
glowView.setAdjustViewBounds(true);
//Filtre pour éclaircir l'image
ColorFilter filter = new LightingColorFilter(Color.rgb(255, 255, 255), Color.rgb(100, 100, 100));
glowView.setColorFilter(filter);

Dans iOS, UIImage lui-même est traité, mais dans Android, la méthode de filtrage d'ImageView est utilisée.

Afficher des images normales avec fondu en entrée + mise à l'échelle

iOS(Swift)

//Animation d'apparence(Évoluer)
//Rétrécir à l'avance
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: {
                //Revenir à la taille d'origine
                stampView.transform = CGAffineTransform.identity
},
               completion: { (finished) in
})

//Animation d'apparence(Fondu en entrée)
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)

//Animation d'apparence (mise à l'échelle + fondu d'entrée)
ViewAnimator.animate(view)
        .fadeIn()
        .duration(150)
        .andAnimate(view)
        .scale(0, 1)
        .duration(200)
        .interpolator(new BounceInterpolator())
        .onStop(() -> {
        })
        .start();

L'assouplissement est chaque méthode, donc ce n'est pas complètement complet. La version Android peut être écrite proprement grâce à une jolie bibliothèque appelée ViewAnimator.

Affichage en fondu d'images éclatantes

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();

Différences entre la version iOS et la version Android

Assouplissement

L'accélération de l'animation agrandie lorsque les étoiles sont affichées est différente car chaque méthode est utilisée. Je pense qu'il sera aligné si vous faites des ajustements fins. (Utilisez Bounce Interporator sur Android et animateWithSpringDumping sur iOS.)

Image de l'étoile traitée

Je pense que le blanc est plus fort sur iOS, donc je pense que si vous faites des ajustements fins, il sera plus proche.

Impressions

Si vous pouvez préparer une image brillante, aucun traitement n'est requis, mais si vous pouvez la modifier dynamiquement, cela est pratique lorsque vous souhaitez essayer diverses choses ou effectuer des ajustements précis. Le code est extrait et partiellement placé, donc s'il y a quelque chose qui ne va pas, merci de me le faire savoir.