zoukankan      html  css  js  c++  java
  • 动画之一:视图动画 View Animation


    原文:https://blog.csdn.net/pzm1993/article/details/77167049 

    view动画支持4中动画效果,分别是:
    • 透明度动画(AlphaAnimation)
    • 缩放动画(ScaleAnimation)
    • 平移动画(TranslateAnimation)
    • 旋转动画(RotateAnimation)

    他们有如下的专属属性:

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android"
        android:interpolator="@[package:]anim/interpolator_resource"
        android:shareInterpolator=["true" | "false"] >
        <alpha
            android:fromAlpha="float"
            android:toAlpha="float" />
        <scale
            android:fromXScale="float"
            android:toXScale="float"
            android:fromYScale="float"
            android:toYScale="float"
            android:pivotX="float"
            android:pivotY="float" />
        <translate
            android:fromXDelta="float"
            android:toXDelta="float"
            android:fromYDelta="float"
            android:toYDelta="float" />
        <rotate
            android:fromDegrees="float"
            android:toDegrees="float"
            android:pivotX="float"
            android:pivotY="float" />
        <set>
            ...
        </set>
    </set>

    还有一些公有的属性,如下:

    XML属 性:android:duration             
    关联方法:setDuration(long)           
    说明:动画持续时间, 默认值是0 (单位ms)                          

    XML属 性:android:fillAfter             
    关联方法:setFillAfter(boolean)           
    说明:表示动画结束后是否保留动画后的状态,true保留动画后状态,false恢复原来状态,默认值是false                          

    XML属 性:android:fillBefore           
    关联方法:setFillBefore(boolean)       
    说明:表示动画结束后是否保留动画前的状态,true恢复原来状态,false保留动画后状态,默认值是true

    XML属 性:android:fillEnabled           
    关联方法:setFillEnabled(boolean)       
    说明:如果设置为true,将fillBefore设置考虑在内                      

    XML属 性:android:interpolator         
    关联方法:setInterpolator(Interpolator) 
    说明:设置动画的变化速率 即插值器,改变动画变换的速度,默认值是@android:anim/accelerate_decelerate_interpolator,即加速减速插值器,在动画开始和结束的时速度较慢,中间时候加速                      

    XML属 性:android:repeatCount       
    关联方法:setRepeatCount(int)         
    说明:设置动画重复执行的次数  ,默认值是0                          
     
    XML属 性:android:repeatMode       
    关联方法:setRepeatMode(int)           
    说明:设置动画重复的模式,其值可以有,restart( 1 ),表示顺序播放,reverse(2)表示重复的时候逆向播放                         
     
    XML属 性:android:startOffset       
    关联方法:setStartOffset(long)         
    说明:设置开始的延迟的时间(单位ms)  ,默认值是0                 
     
    坐标类型:
    Animation.ABSOLUTE : 绝对数值(默认以px为单位)
    Animation.RELATIVE_TO_SELF : 百分数,如:50% (以当前视图的宽度或高度为基数来计算)   
    Animation.RELATIVE_TO_PARENT : 百分数+p,如:50%p (以父视图的宽度或高度为基数来计算)

    设置监听:view.setAnimationListener(AnimationListener)
    启动动画 : view.startAnimation(animation);
    结束动画: view.clearAnimation();
    .....

    下面是使用例子:

    使用时需要在res文件夹下(New->Android Resource Directory)创建anim文件夹,xml文件将写在此处。

    1、透明度动画(AlphaAnimation)

    XML实现:

    <?xml version="1.0" encoding="utf-8"?>
    <alpha xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:duration="2000">
    </alpha>
    Animation animation = AnimationUtils.loadAnimation(this, R.anim.alpha);
    mImage.startAnimation(animation);

    java实现:

    AlphaAnimation alphaAnimation = new AlphaAnimation(0f, 1f);
    alphaAnimation.setDuration(3000);
    mImage.startAnimation(alphaAnimation);

    构造方法有两种:

    1.public AlphaAnimation (Context context, AttributeSet attrs)
    context:当前上下文
    attrs:xml中读取的属性设置

    2.public AlphaAnimation (float fromAlpha, float toAlpha)
    fromAlpha:动画开始的透明度
    toAlpha:动画结束的透明度

    2、缩放动画(ScaleAnimation)

    XML实现:

    <?xml version="1.0" encoding="utf-8"?>
    <scale xmlns:android="http://schemas.android.com/apk/res/android"
           android:duration="3000"
           android:fromXScale="0.0"
           android:fromYScale="0.0"
           android:pivotX="50%"
           android:pivotY="50%"
           android:toXScale="1.0"
           android:toYScale="1.0">
    </scale>

    android:pivotX:缩放轴点的X坐标(其值可以为:数值、百分数、百分数p),例如:如50表示以当前View左上角坐标加50px为初始点、50%表示以当前View的左上角加上当前View宽高的50%做为初始点、50%p表示以当前View的左上角加上父控件宽高的50%做为初始点)
    android:pivotY:缩放轴点的Y坐标,规律同pivotX。

    Animation animation = AnimationUtils.loadAnimation(this, R.anim.scale);
    mImage.startAnimation(animation);

    java实现:

    ScaleAnimation scaleAnimation = new ScaleAnimation(0, 1, 0, 1, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
    scaleAnimation.setDuration(3000);
    mImage.startAnimation(scaleAnimation);

    构造函数:
    1.public ScaleAnimation(Context context, AttributeSet attrs)(同上)

    2.public ScaleAnimation(float fromX, float toX, float fromY, float toY)

    3.public ScaleAnimation(float fromX, float toX, float fromY, float toY, float pivotX, float pivotY)
    pivotX:表示轴点在x方向坐标值,相对于该对象绝对像素位置,0表示该对象的左边缘坐标
    pivotY:表示轴点在y方向坐标值,相对于该对象绝对像素位置,0表示该对象的上边缘坐标
    ps:该构造函数 ,坐标类型默认是:Animation.ABSOLUTE ,因此,作用与xml中android:pivotX为数值时 对应

    4.public ScaleAnimation(float fromX, float toX, float fromY, float toY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
    pivotXType:X轴坐标的类型(不同类型,计算x轴上的偏移量的方式不同)
    pivotXValue:表示轴点在x方向坐标值
    pivotYType:Y轴坐标的类型(不同类型,计算y轴上的偏移量的方式不同)
    pivotYValue:表示轴点在y方向坐标值

    ps:
    当pivotXType=Animation.ABSOLUTE时:pivotXValue的值代表绝对像素,与xml中android:pivotX为数值时对应
    当pivotXType=Animation.RELATIVE_TO_SELF时:pivotXValue的值代表相对于当前View定位,与xml中android:pivotX为百分数时对应
    当pivotXType=Animation.RELATIVE_TO_PARENT:pivotXValue的值代表相对于当前View的父控件定位,与xml中android:pivotX为百分数p时对应

    3、旋转动画(RotateAnimation)

    XML实现:

    <?xml version="1.0" encoding="utf-8"?>
    <rotate xmlns:android="http://schemas.android.com/apk/res/android"
            android:duration="3000"
            android:pivotX="50%"
            android:pivotY="50%"
            android:fromDegrees="0"
            android:toDegrees="90">
    </rotate>

    属性含义:
    android:pivotX:旋转轴点的X坐标(其值可以为:数值、百分数、百分数p),例如:如50表示以当前View左上角坐标加50px为初始点、50%表示以当前View的左上角加上当前View宽高的50%做为初始点、50%p表示以当前View的左上角加上父控件宽高的50%做为初始点)
    android:pivotY:旋转轴点的Y坐标,规律同android:pivotX。
    android:fromDegrees:旋转开始的角度,其值可以为正负
    android:toDegrees:旋转结束的角度,其值可以为正负
    ps:toDegrees -fromDegrees > 0,则顺时针旋转;否则,逆时针旋转。

    Animation animation = AnimationUtils.loadAnimation(mContext, R.anim.rotate);
    mImage.startAnimation(animation);

    java实现:

    RotateAnimation rotateAnimation = new RotateAnimation(0,180);
    rotateAnimation.setDuration(3000);
    mImage.startAnimation(rotateAnimation);

    构造函数:
    1.public RotateAnimation(Context context, AttributeSet attrs)(同上)

    2.public RotateAnimation(float fromDegrees, float toDegrees)
    fromDegrees:旋转开始的角度,其值可以为正负
    toDegrees:旋转结束的角度,其值可以为正负

    3.public RotateAnimation(float fromDegrees, float toDegrees, float pivotX, float pivotY)
    pivotX:表示轴点在x方向坐标值,相对于该对象绝对像素位置,0表示该对象的左边缘坐标
    pivotY:表示轴点在y方向坐标值,相对于该对象绝对像素位置,0表示该对象的上边缘坐标
    ps:该构造函数 ,坐标类型默认是:Animation.ABSOLUTE ,因此,作用与xml中android:pivotX为数值时 对应

    4.public RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType)
    pivotXType:X轴坐标的类型(不同类型,计算x轴上的偏移量的方式不同)
    pivotXValue:表示轴点在x方向坐标值
    pivotYType:Y轴坐标的类型(不同类型,计算y轴上的偏移量的方式不同)
    pivotYValue:表示轴点在y方向坐标值

    4、平移动画(TranslateAnimation)

    XML实现:

    <?xml version="1.0" encoding="utf-8"?>
    <translate xmlns:android="http://schemas.android.com/apk/res/android"
               android:fillAfter="true"
               android:duration="3000"
               android:fromXDelta="50%"
               android:fromYDelta="50%"
               android:toXDelta="50%p"
               android:toYDelta="50%p">
    </translate>

    属性含义如下:
    android:fromXDelta:平移开始X方向坐标(其值可以为:数值、百分数、百分数p,且多可以为正负),其值含义与android:pivotX类似
    android:fromYDelta:平移开始Y方向坐标(其值可以为:数值、百分数、百分数p,且多可以为正负),其值含义与android:pivotY类似
    android:toXDelta:平移结束X方向坐标(其值可以为:数值、百分数、百分数p,且多可以为正负),其值含义与android:pivotX类似
    android:toYDelta:平移结束Y方向坐标(其值可以为:数值、百分数、百分数p,且多可以为正负),其值含义与android:pivotY类似

    Animation animation = AnimationUtils.loadAnimation(this, R.anim.translate);
    mImage.startAnimation(animation);

    java实现:

    TranslateAnimation translateAnimation = new TranslateAnimation(Animation.RELATIVE_TO_SELF,0,Animation.RELATIVE_TO_SELF,0,Animation.RELATIVE_TO_PARENT,0,Animation.RELATIVE_TO_PARENT,0.5f);
    translateAnimation.setDuration(3000);
    translateAnimation.setFillAfter(true);
    mImage.startAnimation(translateAnimation);

    构造函数:
    1. public TranslateAnimation(Context context, AttributeSet attrs)(同上)

    2.public TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)
    fromXDelta:表示在平移开始X方向的绝对像素值
    toXDelta:表示在平移开始Y方向的绝对像素值
    fromYDelta:表示在平移结束X方向的绝对像素值
    toYDelta:表示在平移结束Y方向的绝对像素值
    ps:该构造函数 ,坐标类型默认是:Animation.ABSOLUTE ,因此,作用与xml中android:fromXDelta为数值时 对应

    3.public TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue, int fromYType, float fromYValue, int toYType, float toYValue)
    fromXType:平移开始X轴的坐标类型(不同类型,计算x轴上的偏移量的方式不同)
    fromXValue:平移开始X轴的坐标,其值的含义与fromXType的类型有关
    toXType:平移结束Y轴的坐标类型(不同类型,计算x轴上的偏移量的方式不同)
    toXValue:平移结束X轴的坐标,其值的含义与toXType的类型有关
    fromYType:平移开始Y轴的坐标类型(不同类型,计算x轴上的偏移量的方式不同)
    fromYValue:平移开始Y轴的坐标,其值的含义与fromYType的类型有关
    toYType:平移结束Y轴的坐标类型(不同类型,计算x轴上的偏移量的方式不同)
    fromXType:平移结束Y轴的坐标,其值的含义与toYType的类型有关

    5、复合动画(AnimationSet)

    XML实现:

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android"
         android:shareInterpolator="false">
        <scale
            android:duration="2000"
            android:fromXScale="1.0"
            android:fromYScale="1.0"
            android:interpolator="@android:anim/linear_interpolator"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toXScale="0"
            android:toYScale="0"/>
     
        <set
            android:duration="2000"
            android:interpolator="@android:anim/decelerate_interpolator"
            android:shareInterpolator="true"
            android:startOffset="2000">
            <scale
                android:fromXScale="0"
                android:fromYScale="0"
                android:pivotX="50%"
                android:pivotY="50%"
                android:toXScale="1"
                android:toYScale="1"/>
            <rotate
                android:fromDegrees="0"
                android:pivotX="50%"
                android:pivotY="50%"
                android:toDegrees="180"/>
        </set>
    </set>
    属性含义:
    android:shareInterpolator:子元素是否共享插值器,值为true,表示共同使用;值为false,表示不共享
    其余属性多和其他类似,这里如果需要设置播放的顺序,则需要设置android:startOffset属性
    Animation animation = AnimationUtils.loadAnimation(mContext,R.anim.set);
    mImage.startAnimation(animation);

    java实现:

    AnimationSet animationSet1 = new AnimationSet(false);//一级集合
    ScaleAnimation scaleAnimation1 = new ScaleAnimation(1, 1.4f, 1, 1.4f, Animation.RELATIVE_TO_SELF, 0.5f,Animation.RELATIVE_TO_SELF, 0.5f);
    
    AnimationSet animationSet2 = new AnimationSet(true);//二级集合
    ScaleAnimation scaleAnimation2 = new ScaleAnimation(1.4f, 0, 1.4f, 0, Animation.RELATIVE_TO_SELF, 0.5f,Animation.RELATIVE_TO_SELF, 0.5f);
    RotateAnimation rotateAnimation = new RotateAnimation(0, 180, Animation.RELATIVE_TO_SELF, 0.5f,Animation.RELATIVE_TO_SELF, 0.5f);
    
    animationSet2.addAnimation(scaleAnimation2);
    animationSet2.addAnimation(rotateAnimation);
    animationSet2.setInterpolator(new DecelerateInterpolator());
    animationSet2.setDuration(2000);
    animationSet2.setStartOffset(2000);
    
    animationSet1.addAnimation(scaleAnimation1);
    animationSet1.addAnimation(animationSet2);
    animationSet1.setInterpolator(new AccelerateDecelerateInterpolator());
    animationSet1.setDuration(2000);
    
    mImage.startAnimation(animationSet1);
    构造函数:
    1.AnimationSet(Context context, AttributeSet attrs)(同上)
    2.public AnimationSet(boolean shareInterpolator)
    shareInterpolator:是否共享插值器

    6、动画监听器

    translateAnimation.setAnimationListener(new Animation.AnimationListener() {
        @Override
         public void onAnimationStart(Animation animation) {
                    
        }
     
        @Override
        public void onAnimationEnd(Animation animation) {
     
        }
     
        @Override
        public void onAnimationRepeat(Animation animation) {
     
        }
    });

    7、插值器(Interpolator)的使用

    插值器是在XML中定义的一个动画修改器,它影响动画的变化率。这允许现有动画附加加速、减速、重复、反弹等效果。

    系统为我们提供了各种插值器,其都是实现了Interpolator接口的实现类,具体说明如下:

    java类 XML资源ID 说明
    AccelerateDecelerateInterpolator
    @android:anim/accelerate_decelerate_interpolator
    先加速再减速
    AccelerateInterpolator @android:anim/accelerate_interpolator 持续加速
    AnticipateInterpolator @android:anim/anticipate_interpolator 先退后再加速前进
    AnticipateOvershootInterpolator
    @android:anim/anticipate_overshoot_interpolator 先退后再加速前进,超出终点后再回终点
    BounceInterpolator @android:anim/bounce_interpolator 结束时弹球效果
    CycleInterpolator @android:anim/cycle_interpolator 周期运动
    DecelerateInterpolator @android:anim/decelerate_interpolator 减速
    LinearInterpolator @android:anim/linear_interpolator 匀速
    OvershootInterpolator @android:anim/overshoot_interpolator 向前弹出一定值之后回到原来位置(快速完成动画,超出再回到结束样式)

    XML中使用方法:

    <set android:interpolator="@android:anim/accelerate_interpolator">
        ...
    </set>

    java中使用方法:

    Animation alphaAnimation = new AlphaAnimation(1,0);
                    alphaAnimation.setDuration(3000);
                    //创建插值器对象
                    Interpolator interpolator = new OvershootInterpolator();
                    //为动画添加插值器
                    alphaAnimation.setInterpolator(interpolator);
                    imageView.startAnimation(alphaAnimation);

    自定义插值器:动画执行一半时间以前运动及其缓慢,然后动画加速运行直到结束。

    public class InterpolationDemo implements Interpolator{
    {
        @Override
        public float getInterpolation(float input) {
            if (input > 0 && input < 0.5){
                return input /10;
            }else{
                return input * input;
            }
        }
    }
  • 相关阅读:
    div中嵌套div中使用margin-top失效问题
    thinkphp点击导航变色
    thinkphp I() 方法
    判断是手机端还是电脑端 isMobile()
    手机端H5 header定义样式
    AR.Drone 2.0四轴飞机体验:最好的玩具航拍器
    这是一个专注于电脑技术、软件应用、互联网、嵌入式,电子技术行业等的原创IT博客
    ul li列子
    [HTML]去除li前面的小黑点,和ul、LI部分属性
    Bad update sites
  • 原文地址:https://www.cnblogs.com/zhaozilongcjiajia/p/10714254.html
Copyright © 2011-2022 走看看