Since the animation production made in the iOS version has been ported to the Android version, I will leave that time as a memorandum.
The finished product gif is processed as follows.
Below are the key iOS and Android codes. I'm omitting the parts that don't need to be written.
iOS(Swift)
//Blend white with original image in hardLight mode
let image = UIImage.imageFromAsset(name: "stamp_complete")?
.colorizeImage(color: UIColor.white, blendMode: CGBlendMode.hardLight)
//Method to blend
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
));
//Set the original image
glowView.setImageResource(R.drawable.stamp_star);
glowView.setAdjustViewBounds(true);
//Filter to brighten the image
ColorFilter filter = new LightingColorFilter(Color.rgb(255, 255, 255), Color.rgb(100, 100, 100));
glowView.setColorFilter(filter);
In iOS, UIImage itself is processed, but in Android, the filter method of ImageView is used.
iOS(Swift)
//Appearance animation(Scale out)
//Shrink in advance
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: {
//Return to original size
stampView.transform = CGAffineTransform.identity
},
completion: { (finished) in
})
//Appearance animation(Fade-in)
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)
//Appearance animation (scale out + fade in)
ViewAnimator.animate(view)
.fadeIn()
.duration(150)
.andAnimate(view)
.scale(0, 1)
.duration(200)
.interpolator(new BounceInterpolator())
.onStop(() -> {
})
.start();
Easing is each method, so it is not completely complete. The Android version can be written neatly thanks to a nice library called ViewAnimator.
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();
The easing of the magnified animation when the stars are displayed is different because each method is used. I think that it will be aligned if you make fine adjustments. (Bounce Interporator on Android, animateWithSpringDumping on iOS.)
I feel that white is stronger on iOS, so I think that if you make fine adjustments, you can get closer.
If you can prepare a shining image, no processing is required, but if you can change it dynamically, it is convenient when you want to try various things or make fine adjustments. I have extracted the code and put it partially, so if there is something wrong, please let me know.
Recommended Posts