[置顶] 动画之三种动画的简单使用
2018-01-22 11:15
169 查看
序言
Android的动画可以分为三种:帧动画、View动画、属性动画。我们常见的动画有平移、缩放、旋转、透明度变换等动画,我们也可以自定义一些复杂的动画来满足我们的需求。今天我们就简单的讲一下帧动画、View动画、属性动画的简单使用。帧动画
所谓的帧动画就是一帧一帧的播放预先设定好的图片,就像播放以前那种老式电影一样。Android提供了一个AnimationDrawable类来使用帧动画,首先我们需要用XML来定义一个AnimationDrawable。文件路径是res/drawable/xxx.xml(如果drawable目录不存在,可以手动创建)
<?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false"> <item android:drawable="@drawable/ic_launcher_background" android:duration="500"/> <item android:drawable="@drawable/ic_launcher_background" android:duration="500"/> <item android:drawable="@drawable/ic_launcher_background" android:duration="500"/> </animation-list>
oneshot的意思是代表该动画是否只播放一次。将上面的drawable设置给目标对象的background。
播放动画代码:
AnimationDrawable background = (AnimationDrawable) test.getBackground(); background.start();
这里,需要注意一点的就是,如果图片较大,可能会产生OOM。
View动画
View动画常用的到四种效果,平移、放缩、旋转、透明度变化,分别对应着Animation的四个四个子类:TanslateAnimation、ScaleAnimation、RotateAnimation、AlphaAnimation。这四种动画不仅可以用XML文件来实现,也可以通过代码来实现。相关属性介绍
XML定义
文件路径res/anim/xxx.xml(如果anim目录不存在,可以手动创建)
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:duration = "100" android:fromXDelta="0" android:toXDelta="1" android:fromYDelta="0" android:toYDelta="1" android:interpolator = "@android:anim/accelerate_decelerate_interpolator" android:repeatCount="1" android:repeatMode="restart"/> <scale android:duration="100" android:fromXScale="1" android:fromYScale="1" android:interpolator="@android:anim/linear_interpolator" android:pivotX="50%" android:pivotY="50%" android:repeatCount="1" android:repeatMode="reverse" android:toXScale="0.95" android:toYScale="0.95" /> <rotate android:duration="100" android:fromDegrees="0" android:toDegrees="120" android:pivotX="50%" android:interpolator="@android:anim/bounce_interpolator" android:pivotY="50%" android:zAdjustment = "normal"/> <alpha android:duration="200" android:fromAlpha="0.8" android:toAlpha="1.0" android:fillAfter="false" android:fillBefore="false" android:interpolator="@android:anim/anticipate_interpolator" android:startOffset="0"/> </set>
这个是一个组合动画集,也可以命名单个的动画。
<?xml version="1.0" encoding="utf-8"?> <alpha xmlns:android="http://schemas.android.com/apk/res/android" android:duration="200" android:fillAfter="true" android:fromAlpha="1.0" android:toAlpha="0.8" />
动画的使用:
Animation animation = AnimationUtils.loadAnimation(this, R.anim.test);
animation.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
view.startAnimation(animation);
可以添加动画的监听,执行需要的操作。
代码定义
平移动画
/** * Constructor to use when building a TranslateAnimation from code * * @param fromXType Specifies how fromXValue should be interpreted. One of * Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, or * Animation.RELATIVE_TO_PARENT. * @param fromXValue Change in X coordinate to apply at the start of the * animation. This value can either be an absolute number if fromXType * is ABSOLUTE, or a percentage (where 1.0 is 100%) otherwise. * @param toXType Specifies how toXValue should be interpreted. One of * Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, or * Animation.RELATIVE_TO_PARENT. * @param toXValue Change in X coordinate to apply at the end of the * animation. This value can either be an absolute number if toXType * is ABSOLUTE, or a percentage (where 1.0 is 100%) otherwise. * @param fromYType Specifies how fromYValue should be interpreted. One of * Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, or * Animation.RELATIVE_TO_PARENT. * @param fromYValue Change in Y coordinate to apply at the start of the * animation. This value can either be an absolute number if fromYType * is ABSOLUTE, or a percentage (where 1.0 is 100%) otherwise. * @param toYType Specifies how toYValue should be interpreted. One of * Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, or * Animation.RELATIVE_TO_PARENT. * @param toYValue Change in Y coordinate to apply at the end of the * animation. This value can either be an absolute number if toYType * is ABSOLUTE, or a percentage (where 1.0 is 100%) otherwise. */ public TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta) public TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue, int fromYType, float fromYValue, int toYType, float toYValue)
放缩动画
/** * Constructor to use when building a ScaleAnimation from code * * @param fromX Horizontal scaling factor to apply at the start of the * animation * @param toX Horizontal scaling factor to apply at the end of the animation * @param fromY Vertical scaling factor to apply at the start of the * animation * @param toY Vertical scaling factor to apply at the end of the animation * @param pivotX The X coordinate of the point about which the object is * being scaled, specified as an absolute number where 0 is the left * edge. (This point remains fixed while the object changes size.) * @param pivotY The Y coordinate of the point about which the object is * being scaled, specified as an absolute number where 0 is the top * edge. (This point remains fixed while the object changes size.) * @param pivotXType Specifies how pivotXValue should be interpreted. One of * Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, or * Animation.RELATIVE_TO_PARENT. * @param pivotXValue The X coordinate of the point about which the object * is being scaled, specified as an absolute number where 0 is the * left edge. (This point remains fixed while the object changes * size.) This value can either be an absolute number if pivotXType * is ABSOLUTE, or a percentage (where 1.0 is 100%) otherwise. * @param pivotYType Specifies how pivotYValue should be interpreted. One of * Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, or * Animation.RELATIVE_TO_PARENT. * @param pivotYValue The Y coordinate of the point about which the object * is being scaled, specified as an absolute number where 0 is the * top edge. (This point remains fixed while the object changes * size.) This value can either be an absolute number if pivotYType * is ABSOLUTE, or a percentage (where 1.0 is 100%) otherwise. */ public ScaleAnimation(float fromX, float toX, float fromY, float toY) public ScaleAnimation(float fromX, float toX, float fromY, float toY,float pivotX, float pivotY) public ScaleAnimation(float fromX, float toX, float fromY, float toY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
旋转动画
public RotateAnimation(float fromDegrees, float toDegrees) public RotateAnimation(float fromDegrees, float toDegrees, float pivotX, float pivotY) public RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
透明度动画
public AlphaAnimation(float fromAlpha, float toAlpha)
以上就是四种动画的构造函数,相关的参数含义,注释里面就有,自己选择合适的构造函数;来定义相关动画,使用的也很简单
AlphaAnimation animation = new AlphaAnimation(0,1); animation.setDuration(1000); view.setAnimation(animation);
AnimationSet set = new AnimationSet()可以将多个动画组合起来添加到set中执行。
AnimationSet set = new AnimationSet(true); xxxAnimation xxx = new xxxAnimation(); yyyAnimation yyy = new yyyAnimation(); zzzAnimation zzz = new zzzAnimation(); set.addAnimation(xxx); set.addAnimation(yyy); set.addAnimation(zzz); set.setDuration(1000); view.setAnimation(set);
动画时间可以每个动画单独设定,也可以一起设定,set构造函数中的true表示是否共享插值器,就是动画变化率是否一样,系统默认的插值器是accelerate_decelerate_interpolator加速减速插值器,有关差值器将在下节介绍。
属性动画
ObjectAnimator是ValueAnimator的子类,ValueAnimator只提供一个变化的过程和值,对于具体的控件做动画没有实际用途,但有时候可以利用变化过程中的值来做相应的操作。ValueAnimator animator = ValueAnimator.ofInt(1, 4); animator.setInterpolator(new LinearInterpolator()); animator.setDuration(500); animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { int value = (int) animation.getAnimatedValue(); switch (value){ case 1: showAnimation(mRightIcon); break; case 2: showAnimation(mIcon); showAnimation(mAdChoice); showAnimation(mAdIcon); break; case 3: showAnimation(mLeftIcon); break; case 4: showAnimation(mSecondIcon); break; default: break; } } }); animator.start();
ValueAnimator.ofFloat(float… values)
/** * Constructs and returns a ValueAnimator that animates between float values. A single * value implies that that value is the one being animated to. However, this is not typically * useful in a ValueAnimator object because there is no way for the object to determine the * starting value for the animation (unlike ObjectAnimator, which can derive that value * from the target object and property being animated). Therefore, there should typically * be two or more values. * * @param values A set of values that the animation will animate between over time. * @return A ValueAnimator object that is set up to animate between the given values. */
ObjectAnimator的构造方法中就可以添加执行动画的控件
public static ObjectAnimator ofFloat(Object target, String propertyName, float… values)
public static ObjectAnimator ofInt(Object target, String propertyName, int… values)
这里只介绍这两种构造,其他的在后续中介绍。
ObjectAnimator animator = ObjectAnimator.ofFloat(view, "translationY", -200f, 20.0f, 0f); animator.setDuration(1000); animator.setInterpolator(new LinearInterpolator()); animator.start();
AnimatorSet属性动画集
AnimatorSet set = new AnimatorSet(); set.playTogether(anim1, anim2); //一起执行 set.play(anim3).after(anim4); //anim3在anim4执行完后执行 set.setDuration(1000); set.addListener(new AnimatorListenerAdapter() { }); set.setInterpolator(new DecelerateInterpolator()); set.start();
三种动画的简单使用这里就讲完了,后面会针对上述动画做更加详细的介绍,请各位看官多多指点。
相关文章推荐
- [置顶] 使用红孩儿工具箱完成基于Cocos2d-x的简单游戏动画界面
- 在 unity 中使用三种简单的方式实现实时时钟动画
- 使用J2ME技术实现简单的动画
- Android 三种动画的使用 – Tween Animation
- 使用NSTimer与iphone的简单动画,实现飘雪效果
- 简单图片3D变换动画的制作(使用transition、transform)
- 使用NSTimer与iphone的简单动画,实现飘雪效果
- 使用J2ME技术实现简单的动画(附代码实现)
- Core Animation基础介绍、简单使用CALayer以及多种动画效果
- Core Animation基础介绍、简单使用CALayer以及多种动画效果
- Core Animation基础介绍、简单使用CALayer以及多种动画效果
- 使用红孩儿工具箱完成基于Cocos2d-x的简单游戏动画界面
- Android动画:AnimationDrawable资源的简单使用
- Dojo1.8系列教程二 ---- 简单的模块及动画使用
- 使用NSTimer与iphone的简单动画,实现飘雪效果
- iPhone开发之创建简单界面视图的三种方式之一 使用xcode4自动生成界面
- 使用NSTimer与iphone的简单动画,实现飘雪效果
- 使用定时器,以及形成一个简单的动画。
- Core Animation基础介绍、简单使用CALayer以及多种动画效果
- 比较简单实用的使用正则三种版本的js去空格处理方法