How to realize the animation of selecting attribute specifications in the product detail page of iOS Taobao
Xiaobian to share with you how to achieve imitation iOS Taobao product details page selection attribute specifications animation, I believe most people do not know how to share this article for your reference, I hope you have a lot of harvest after reading this article, let us go to understand it together!
critical code
@TargetApi(Build.VERSION_CODES.HONEYCOMB_MR1)private void startContentViewAnim(boolean isSmall){ //Set the center point of rotation float pivotX = mContentView.getWidth() / 2.0f; float pivotY = mContentView.getHeight(); mContentView.setPivotX(pivotX); mContentView.setPivotY(pivotY); final ViewPropertyAnimator animate = mContentView.animate(); if (isSmall) { //grow final android.view.ViewPropertyAnimator viewPropertyAnimator = animate .rotationX(5f).scaleX(1.0f).scaleY(1.0f).y(0); viewPropertyAnimator.setListener(new android.animation.AnimatorListenerAdapter() { @Override public void onAnimationEnd(android.animation.Animator animation) { animate.rotationX(0); viewPropertyAnimator.setListener(null); } }); } else { //zoom out final ViewPropertyAnimator viewPropertyAnimator = animate .rotationX(5); viewPropertyAnimator.setListener(new android.animation.AnimatorListenerAdapter() { @Override public void onAnimationEnd(android.animation.Animator animation) { animate.rotationX(0).scaleX(0.85f).scaleY(0.85f).y(-(mContentView.getHeight() * 0.15f / 2.0f)); viewPropertyAnimator.setListener(null); } }); }}
Analyze the animation, disassemble it and see it
window goes dark, exits light.
Select box entry bottom-up, exit top-down
activity layout rotation becomes smaller
The first two points are relatively simple and common. Analyze the third point.
It can be seen as:
1. rotate the bottom of the shaft by an appropriate angle;
2. The last animation is followed by a rotation back around the bottom, while the layout shrinks, while the entire layout moves up;
Coming back is the opposite process.
Full code download github.com/shaodong618/AnimDemos
After writing it, I searched the Internet and found that someone had already achieved this effect.
Compare it, I still think my own is better (hahaha selling melons ~~~)
You don't have to change any structure of your original page.
The layout of my animation is contentView. The black background is set to DecorView.
Animated sentences are simple and clear
The above is "how to achieve imitation iOS Taobao product details page selection attribute specification animation" all the content of this article, thank you for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to the industry information channel!
