网站建设实习目的,精东影视文化传媒有限公司官网,国外做农产品有名的网站有哪些,做uml图网站View 动画相关内容可参考官网 动画资源
此前也有写 View 动画相关的内容#xff0c;但都只是记录代码#xff0c;没有特别分析。以此篇作为汇总、整理、分析。
Android View 动画有4中#xff0c;分别是
平移动画 TranslateAnimation缩放动画 ScaleAnimation旋转动画 Rot…View 动画相关内容可参考官网 动画资源
此前也有写 View 动画相关的内容但都只是记录代码没有特别分析。以此篇作为汇总、整理、分析。
Android View 动画有4中分别是
平移动画 TranslateAnimation缩放动画 ScaleAnimation旋转动画 RotateAnimation透明度动画 AlphaAnimation
View 动画可以单独使用也可以一起使用一起使用就叫复合动画。
实现 View 动画有 2 种方式java 方式和 xml 方式。
Demo 图说明动画作用在图片上。图片显示在左上角图片右侧和下方的线是为了方便看出 View 动画前后的位置、大小对比无实际作用。
平移动画 TranslateAnimation
对 View 做水平或者竖直方向上的移动。
java 方式
import android.view.animation.TranslateAnimation;TranslateAnimation translateAnimation new TranslateAnimation(0,imageView.getWidth(),0,0);
translateAnimation.setDuration(3000);//动画时长
translateAnimation.setFillAfter(true);//true view停留在动画结束的地方。false 动画结束后 view 返回原位
imageView.startAnimation(translateAnimation);xml 方式
用 AS 可以很方便地创建 anim 目录和动画文件。
在 res/anim/view_anim_translate.xml 创建文件写入
?xml version1.0 encodingutf-8?
set xmlns:androidhttp://schemas.android.com/apk/res/android !--android:fromXDeltaFloat or percentage. 移动起始点的x坐标. 表示形式有三种1 相对于自己的左边界的距离单位像素值。例如 52 相对于自己的左边界的距离与自身宽度的百分比。例如 5%3 相对于父View的左边界的距离与父View宽度的百分比。例如 5%pandroid:toXDeltaFloat or percentage. 移动结束点的x坐标. 表现形式同上android:fromYDeltaFloat or percentage. 移动起始点的y坐标. 表示形式有三种1 相对于自己的上边界的距离单位像素值。例如 52 相对于自己的上边界的距离与自身高度的百分比。例如 5%3 相对于父View的上边界的距离与父View高度的百分比。例如 5%pandroid:toYDeltaFloat or percentage. 移动结束点的y坐标. 表现形式同上--translateandroid:duration3000android:fromXDelta0android:fromYDelta0android:toXDelta800android:toYDelta0/
/set然后通过 AnimationUtils 实现
Animation animTran AnimationUtils.loadAnimation(ViewAnimationActivity.this, R.anim.view_anim_translate);
animTran.setFillAfter(true);
imageView.startAnimation(animTran);实现效果View 向右平移自身宽度的距离。
缩放动画 ScaleAnimation
对 View 进行缩放操作。
java 方式
放大为 1.5 倍用 1.5f 缩小为 0.5 倍用 0.5f 很好理解。
import android.view.animation.AccelerateInterpolator;
import android.view.animation.ScaleAnimation;ScaleAnimation scaleAnimation new ScaleAnimation(1 ,1.5f ,1 ,1.5f);// X轴 Y轴都放大 1.5 倍
scaleAnimation.setDuration(3000);
scaleAnimation.setFillAfter(true);
scaleAnimation.setInterpolator(new AccelerateInterpolator());// 设置动画插值器用来控制动画速度这是加速插值器动画速度会越来越快
imageView.startAnimation(scaleAnimation);方法 public ScaleAnimation(float fromX, float toX, float fromY, float toY) {} 默认缩放总中心是 0,0 即 View 的左上角。 方法 public ScaleAnimation(float fromX, float toX, float fromY, float toY,float pivotX, float pivotY) {} 最后两个参数指定缩放中心点。
缩放中心点不同缩放效果是不同的。 如 效果1 new ScaleAnimation(1 ,0.5f ,1 , 0.5f);
效果2new ScaleAnimation(1 ,0.5f ,1 ,0.5f, (float) 200, (float) 100); 效果3new ScaleAnimation(1 ,0.5f ,1 ,0.5f, (float) imageView.getWidth(), (float) imageView.getHeight());
xml 方式
创建 res/anim/view_anim_translate.xml 文件
?xml version1.0 encodingutf-8?
set xmlns:androidhttp://schemas.android.com/apk/res/android !--android:fromXScaleFloat. 水平方向缩放比例的初始值1.0是没有变化。android:toXScaleFloat. 水平方向缩放比例的结束值1.0是没有变化。android:fromYScaleFloat. 竖直方向缩放比例的初始值1.0是没有变化。android:toYScaleFloat. 竖直方向缩放比例的结束值1.0是没有变化。android:pivotXFloat. 缩放中心点的x坐标android:pivotYFloat. 缩放中心点的y坐标--scaleandroid:duration3000android:fromXScale1.0android:fromYScale1.0android:interpolatorandroid:anim/accelerate_interpolatorandroid:pivotX50%android:pivotY50%android:toXScale1.5android:toYScale1.5 /
/set然后通过 AnimationUtils 实现
Animation animScale AnimationUtils.loadAnimation(ViewAnimationActivity.this, R.anim.view_anim_scale);
animScale.setFillAfter(true);
imageView.startAnimation(animScale);实现效果View 在竖直和水平方向上都放大 1.5 倍。
旋转动画 RotateAnimation
对 View 进行旋转。
默认以 View 的左上角为中心点旋转也可以指定旋转中心的坐标。旋转中心的坐标不同旋转效果也是不一样的。
java 方式
import android.view.animation.AccelerateDecelerateInterpolator;
import android.view.animation.ScaleAnimation;RotateAnimation rotateAnimation new RotateAnimation(0,180, imageView.getWidth(), imageView.getHeight());
rotateAnimation.setFillAfter(true);
rotateAnimation.setDuration(3000);
rotateAnimation.setRepeatCount(1);//重复1次
rotateAnimation.setInterpolator(new AccelerateDecelerateInterpolator());// 设置动画插值起用来控制动画速度这是加速减速插值器动画速度先快后慢
imageView.startAnimation(rotateAnimation);xml 方式
创建 res/anim/view_anim_rotate.xml 文件
?xml version1.0 encodingutf-8?
set xmlns:androidhttp://schemas.android.com/apk/res/android !--android:fromDegreesFloat. 旋转初始的角度。android:toDegreesFloat. 旋转结束的角度。android:pivotXFloat or percentage. 旋转中心点x坐标表示形式有三种1 相对于自己的左边界的距离单位像素值。例如 52 相对于自己的左边界的距离与自身宽度的百分比。例如 5%3 相对于父View的左边界的距离与父View宽度的百分比。例如 5%pandroid:pivotYFloat or percentage. 旋转中心点y坐标表示形式有三种1 相对于自己的上边界的距离单位像素值。例如 52 相对于自己的上边界的距离与自身宽度的百分比。例如 5%3 相对于父View的上边界的距离与父View高度的百分比。例如 5%p--rotateandroid:duration2000android:fromDegrees0android:interpolatorandroid:anim/accelerate_decelerate_interpolatorandroid:pivotX100%android:pivotY100%android:toDegrees180android:repeatCount1 /
/set然后通过 AnimationUtils 实现
Animation animRotate AnimationUtils.loadAnimation(ViewAnimationActivity.this, R.anim.view_anim_rotate);
animRotate.setFillAfter(false);
imageView.startAnimation(animRotate);实现效果绕着 View 的右下角旋转 180° 重复1次。
透明度动画 AlphaAnimation
对 View 进行透明度操作。
java 方式
import android.view.animation.AlphaAnimation;AlphaAnimation alphaAnim new AlphaAnimation(1f, 0);
alphaAnim.setDuration(2000);
alphaAnim.setFillAfter(true);
imageView.startAnimation(alphaAnim);xml 方式
创建 res/anim/view_anim_alpha.xml 文件
?xml version1.0 encodingutf-8?
set xmlns:androidhttp://schemas.android.com/apk/res/android!--android:fromAlphaFloat. 设置透明度的初始值其中0.0是透明1.0是不透明的。android:toAlphaFloat. 设置透明度的结束值其中0.0是透明1.0是不透明的。--alphaandroid:duration2000android:fromAlpha1.0android:toAlpha0.0 /
/set然后通过 AnimationUtils 实现
Animation alphaAnimation AnimationUtils.loadAnimation(ViewAnimationActivity.this, R.anim.view_anim_alpha);
alphaAnimation.setFillAfter(true);
imageView.startAnimation(alphaAnimation);实现效果View 变为不透明。
复合动画
复合动画就是把 View 动画结合使用。也是通过 java 方式和 xml 方式实现。
平移透明度
import android.view.animation.AnimationSet;AnimationSet set1 new AnimationSet(true);
TranslateAnimation tAnimation1 new TranslateAnimation(0,imageView.getWidth(),0,0);
AlphaAnimation aAnim1 new AlphaAnimation(1f, 0.2f);set1.addAnimation(tAnimation1);
set1.addAnimation(aAnim1);
set1.setDuration(2500);
set1.setFillAfter(true);
imageView.startAnimation(set1);实现效果View 向右平移自身宽度的距离透明度逐渐变为 0.2f 。
平移缩放
AnimationSet set2 new AnimationSet(true);
TranslateAnimation tAnimation2 new TranslateAnimation(0,(float) imageView.getWidth()/4,0,(float) imageView.getHeight()/8);ScaleAnimation sAnimation2 new ScaleAnimation(1 ,1.5f ,1 ,1.5f);set2.addAnimation(tAnimation2);
set2.addAnimation(sAnimation2);
set2.setDuration(2500);
set2.setFillAfter(true);
imageView.startAnimation(set2);实现效果View 向右平移自身宽度 1/4 的距离向下平移自身高度 1/8 的距离放大 1.5 倍 。
平移旋转
AnimationSet set3 new AnimationSet(true);
TranslateAnimation tAnimation3 new TranslateAnimation(0,imageView.getWidth(),0,imageView.getHeight());
RotateAnimation rAnimation3 new RotateAnimation(0,360, imageView.getWidth(), imageView.getHeight());set3.addAnimation(tAnimation3);
set3.addAnimation(rAnimation3);
set3.setDuration(2500);
set3.setFillAfter(true);
imageView.startAnimation(set3);实现效果View 向右平移自身宽度的距离向下平移自身高度的距离绕着右下角旋转 360°
平移旋转透明度
java 方式
AnimationSet set4 new AnimationSet(false);
RotateAnimation rAnimation4 new RotateAnimation(0,720, (float) imageView.getWidth()/2, (float) imageView.getHeight()/2);
rAnimation4.setInterpolator(new AccelerateDecelerateInterpolator());
rAnimation4.setDuration(3500);AlphaAnimation aAnim4 new AlphaAnimation(1f, 0.5f);
aAnim4.setInterpolator(new AccelerateInterpolator());
aAnim4.setDuration(3000);ScaleAnimation sAnimation4 new ScaleAnimation(1 ,0.5f ,1 ,0.5f, (float) imageView.getWidth()/2, (float) imageView.getHeight()/2);
sAnimation4.setInterpolator(new LinearInterpolator());
sAnimation4.setDuration(2500);set4.addAnimation(rAnimation4);
set4.addAnimation(aAnim4);
set4.addAnimation(sAnimation4);
set4.setFillAfter(true);
set4.setStartOffset(500);
mageView.startAnimation(set4);xml 方式
创建 res/anim/view_anim_set4.xml 文件
?xml version1.0 encodingutf-8?
set xmlns:androidhttp://schemas.android.com/apk/res/androidandroid:shareInterpolatorfalserotateandroid:duration3500android:fromDegrees0android:interpolatorandroid:anim/accelerate_decelerate_interpolatorandroid:pivotX50%android:pivotY50%android:toDegrees720 /alphaandroid:duration3000android:fromAlpha1.0android:interpolatorandroid:anim/accelerate_interpolatorandroid:toAlpha0.5 /scaleandroid:duration2500android:fromXScale1android:fromYScale1android:interpolatorandroid:anim/linear_interpolatorandroid:pivotX50%android:pivotY50%android:toXScale0.5android:toYScale0.5 /
/set然后通过 AnimationUtils 实现
Animation anim4 AnimationUtils.loadAnimation(ViewAnimationActivity.this, R.anim.view_anim_set4);
anim4.setFillAfter(true);
imageView.startAnimation(anim4);实现效果以 View 的中心旋转 720° 缩小为 0.5 倍 透明度逐渐变为 0.5f 。
监听动画过程
使用 Animation.setAnimationListener(AnimationListener listener) 方法即可监听动画的开始、结束、重复等过程。
Animation anim4 AnimationUtils.loadAnimation(ViewAnimationActivity.this, R.anim.view_anim_set4);anim4.setFillAfter(true);anim4.setAnimationListener(new Animation.AnimationListener() {Overridepublic void onAnimationStart(Animation animation) {}Overridepublic void onAnimationEnd(Animation animation) {}Overridepublic void onAnimationRepeat(Animation animation) {}});imageView.startAnimation(anim4);对点击事件的影响
View 动画对点击事件无影响。
即 View 的大小、位置变化后点击 View 的原始位置点击事件还是有的。
如果动画使 View 超出了原始位置超出的部分是无法响应点击事件的。
插值器
插值器用来控制动画的执行速度。
通过 Animation.setInterpolator(Interpolator i) 方法可以设置动画的插值器如
ScaleAnimation scaleAnimation new ScaleAnimation(1 ,1.5f ,1 ,1.5f);
scaleAnimation.setDuration(3000);
scaleAnimation.setFillAfter(true);
scaleAnimation.setInterpolator(new AccelerateInterpolator());// 设置动画插值器
imageView.startAnimation(scaleAnimation);也可以直接在动画 xml 文件中指定 android:interpolator
?xml version1.0 encodingutf-8?
set xmlns:androidhttp://schemas.android.com/apk/res/android scaleandroid:duration3000android:fromXScale1.0android:fromYScale1.0android:interpolatorandroid:anim/accelerate_interpolatorandroid:pivotX50%android:pivotY50%android:toXScale1.5android:toYScale1.5 /
/set系统预设的插值器有
插值器说明AccelerateDecelerateInterpolator开始和结束速度慢中间加速AccelerateInterpolator开始慢逐渐加速AnticipateInterpolator先反方向执行动画再正方向执行AnticipateOvershootInterpolatorAnticipateInterpolator 结合 OvershootInterpolator 先反方向执行动画再正方向执行到动画终点后继续前进一段距离然后回到动画终点BounceInterpolator自由落体到终点后回弹几下再回到终点类似乒乓球落地效果CycleInterpolator正弦曲线先正方向执行动画再反方向执行动画DecelerateInterpolator开始快结束慢LinearInterpolator线性、匀速OvershootInterpolator动画终点后继续前进一段距离然后回到动画终点PathInterpolator通过它的构造函数实现贝塞尔曲线LinearOutSlowInInterpolatorandroidx里的速度曲线用的贝塞尔曲线开始速度快逐渐减速类似 DecelerateInterpolator 但速度更快FastOutLinearInInterpolatorandroidx里的速度曲线用的贝塞尔曲线逐渐加速类似 AccelerateInterpolator 但速度更快FastOutSlowInInterpolatorandroidx里的速度曲线用的贝塞尔曲线先加速再减速类似 AccelerateDecelerateInterpolator 但速度更快
这些插值器基本满足了日常需求。
效果对比 除了 CycleInterpolator 绿色线是所有动画的终点。
效果对比2
自定义插值器
自定义插值器
继承 BaseInterpolator 重写 getInterpolation(float input) 方法
相关继承关系为 BaseInterpolator Interpolator TimeInterpolator
package android.animation;/*** A time interpolator defines the rate of change of an animation. This allows animations* to have non-linear motion, such as acceleration and deceleration.*/
public interface TimeInterpolator {/*** Maps a value representing the elapsed fraction of an animation to a value that represents* the interpolated fraction. This interpolated value is then multiplied by the change in* value of an animation to derive the animated value at the current elapsed animation time.** param input A value between 0 and 1.0 indicating our current point* in the animation where 0 represents the start and 1.0 represents* the end* return The interpolation value. This value can be more than 1.0 for* interpolators which overshoot their targets, or less than 0 for* interpolators that undershoot their targets.*/float getInterpolation(float input);
}input 取值是从 0.0 到 1.0 分别表示动画的开始和结束。
看系统插值器的实现都涉及到数学公式~~
本例的效果和 LinearInterpolator 是一样的因为抄的 LinearInterpolator 的实现。
import android.view.animation.BaseInterpolator;public class MyInterpolator extends BaseInterpolator {Overridepublic float getInterpolation(float input) {return input;}
}测试 return input/2 和 return input*1.1f 的结果如下 虽然最终效果是不适宜的但说明自定义插值器有效果。
