Android动画解析(一)

栏目: IOS · Android · 发布时间: 5年前

内容简介:(1)xml方式在res-anim下新建 alpha_anim.xml文件(名称自己随意),有三个属性,duration、 fromAlpha、 toAlpha。其中duration是动画通用属性,为动画执行的周期,默认值为0,单位毫秒, fromAlpha:动画开始透明度 toAlpha:动画结束时的透明度。取值范围都为0.0f-1.0f,0.0f是全透明,1.0f为不透明。接着使用Animationutils加载动画文件,配置属性,startAnimation开始动画。(ps:animationView
  • view动画有四种类型,分别是AlphaAnimation(透明度动画)、ScaleAnimation(缩放动画)、TranslateAnimation(平移动画)、RotateAnimation(旋转动画)。

1.概述

  • view动画使用的场景不多可以做了解使用。因为view动画的一个特性就是做了平移或者缩放动画之后,view的真实位置没有随动画而改变。

  • 使用方式有两种。一种是xml方式,一种是直接在代码中创建。使用xml的方式需要在res-anim(如果没有anim文件夹,请手动新建)下新建一个xml文件。一种是直接在代码里创建对应的动画对象。

2.AlphaAnimation

(1)xml方式

在res-anim下新建 alpha_anim.xml文件(名称自己随意),有三个属性,duration、 fromAlpha、 toAlpha。其中duration是动画通用属性,为动画执行的周期,默认值为0,单位毫秒, fromAlpha:动画开始透明度 toAlpha:动画结束时的透明度。取值范围都为0.0f-1.0f,0.0f是全透明,1.0f为不透明。

<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<!--保留动画执行后的view状态--!>
    <alpha
        android:duration="2000"  动画执行周期 单位毫秒
        android:fromAlpha="1.0"  动画开始透明度 float
        android:toAlpha="0.1"    动画结束透明度 float
    />
    
</set>
复制代码

接着使用Animationutils加载动画文件,配置属性,startAnimation开始动画。(ps:animationView是做动画的view)

Animation animation = AnimationUtils.loadAnimation(this, R.anim.alpha_anim); 加载动画xml文件
animationView.startAnimation(animation); 开始动画
复制代码

(2) 代码方式

我们创建一个从完全透明到完全显示的动画。使用这个构造方法public AlphaAnimation(float fromAlpha, float toAlpha)。setDuration(long durationMillis)方法设置动画周期。

AlphaAnimation alphaAnimation = new AlphaAnimation(0.0f,1.0f);
alphaAnimation.setDuration(5000);
alphaAnimation.setFillAfter(true);
animationView.startAnimation(alphaAnimation);
复制代码

3.RotateAnimation

(1)xml方式

<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
    android:fromDegrees="360" 动画开始角度
    android:toDegrees="180" 动画结束角度
    android:pivotX="50%"    旋转中心点X坐标
    android:pivotY="50%"   旋转中心点Y坐标
    android:duration="5000" 周期
    />
</set>
复制代码
  • [1] 关于旋转角度的理解,正数是顺时针旋转,负数是逆时针。那傻瓜点理解view最终旋转方向就可以简单理解为:animDegrees =toDegrees-fromDegrees,animDegrees为正数是顺时针,负数则是逆时针。
  • [2] pivotX和pivotY取值。有三种写法分别是‘50’,‘50%’,‘50p%’。参考的坐标系均为当前动画的view。以pivotX为例,pivotY同pivotX。 ‘50’是x的坐标值是5px。‘50%’是取当前动画view的宽度的50%作为x的坐标值。‘50%p’是取当前动画view的父view的宽度的50%作为x方向的坐标值。

(2) 代码方式

  • RotateAnimation有四个构造方法。其中public RotateAnimation(Context context, AttributeSet attrs)这个构造方法不做研究,有兴趣的可以查看源码。这里以6个参数的构造方法距离。因为另外两个构造方法也是调用的这个构造方法。
RotateAnimation rotateAnimation = new RotateAnimation(0,360f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
 rotateAnimation.setDuration(5000);
 rotateAnimation.setFillAfter(true);
 animationView.startAnimation(rotateAnimation);
  
复制代码
  • public RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue,int pivotYType, float pivotYValue)。使用另外两个构造方法时,其中pivotXType和pivotYType的默认值是Animation.ABSOLUTE,pivotXValue和pivotYValue的默认值是0.0f。重点说一下pivotXType和pivotYType这两个参数。以pivotXType举例,pivotYType同pivotYType。
(3) pivotXType/pivotYType
  • 取值为三个, 分别是Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, Animation.RELATIVE_TO_PARENT,这三者的坐标系都是view的坐标系,即当前view的左上角为原点(0,0)。以下举例都是以当前view的中心点为起点。

  • (1) 取值为 Animation.ABSOLUTE时,pivotXValue取值是具体的坐标值。例如,要做动画的view宽高分别是100px,100px,pivotXValue和pivotYValue,分别取值为50px,50px.

  • (2) 取值为 Animation.RELATIVE_TO_SELF时,pivotXValue取值是0.0-1.0f,该数值是当前view的宽度的倍数。例如,要做动画的view宽高分别是100、100(没用,看看就好),pivotXValue和pivotYValue,分别取值为0.5f,0.5f。

  • (3) 取值为 Animation.RELATIVE_TO_PARENT时,pivotXValue取值是0.0-1.0f,该数值是当前view的宽度的倍数。例如,要做动画的view宽高分别是100、100,父view的的宽高分别是500、500。view在父控件中居中,那么pivotXValue和pivotYValue,分别取值为0.1f,0.1f。

4.ScaleAnimation

(1) xml方式 废话不多说,直接上代码。

<set xmlns:android="http://schemas.android.com/apk/res/android">

    <scale
        android:duration="5000" 周期
        android:fromXScale="1.0" X轴方向上的开始大小 
        android:fromYScale="1.0" Y轴方向上的开始大小 
        android:pivotX="50%" 缩放中心点X坐标
        android:pivotY="50%" 缩放中心点Y坐标
        android:toXScale="0.1" X轴方向上的结束大小 
        android:toYScale="0.1" Y轴方向上的结束大小 
        />
</set>
复制代码

说下fromXScale、fromYScale、toXScale、toYScale、pivotX、pivotY四个属性的取值请参考RotateAnimation的pivotX和pivotY取值讲解。例如把一个view以view中心为缩放中心,从原来大小放大2倍。fromXScale取值是1.0或者100%,fromYScale取值是1.0或者100%,toXScale取值是2.0或者200%,toYScale的取值是2.0或者200%。至于pivotX和pivotY属性请参考RotateAnimation相关部分。

(2)代码方式 同样以放大2倍为示例。使用8个参数的构造方法,通过参数名就能一目了然。

public ScaleAnimation(float fromX, float toX, float fromY, float toY,
    int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
    
复制代码
ScaleAnimation scaleAnimation = new ScaleAnimation(1.0f,2.0f,1.0f,2.0f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
 scaleAnimation.setDuration(5000);
 scaleAnimation.setFillAfter(true);
 animationView.startAnimation(scaleAnimation);
复制代码

5.TranslateAnimation

  • (1)xml方式

fromXDelta X轴上的开始坐标, fromYDelta Y轴上的结束坐标, toXDelta X轴上的开始坐标, toYDelta Y轴上的结束坐标。 以上四个属性的取值请参考RotateAnimation的pivotX和pivotY讲解部分。

<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
   android:fromXDelta="0"
   android:fromYDelta="0"
   android:toXDelta="100"
   android:toYDelta="100"
   android:duration="5000"
    />
</set>

复制代码
  • (2)代码方式 使用8个参数的构造方法举例。
public TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue,
int fromYType, float fromYValue, int toYType, float toYValue)

复制代码
TranslateAnimation translateAnimation = new TranslateAnimation(Animation.RELATIVE_TO_SELF,0.0f,Animation.RELATIVE_TO_SELF,1.0f,Animation.RELATIVE_TO_SELF,0.0f,Animation.RELATIVE_TO_SELF,1.0f);
translateAnimation.setDuration(5000);
translateAnimation.setFillAfter(true);
animationView.startAnimation(translateAnimation);

复制代码

6.动画可以配合一起使用。

  • (1) xml方式 在set标签下,加入你想要的动画类型。例如:
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <alpha
        android:duration="5000"
        android:fromAlpha="1.0"
        android:toAlpha="0.1"
        />

    <rotate
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="10%p"
        android:pivotY="10%p"
        android:duration="5000"
        />

    <scale
        android:duration="5000"
        android:fromXScale="100%"
        android:fromYScale="100%"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="100%p"
        android:toYScale="100%p"
        />
    <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="100"
        android:toYDelta="100"
        android:duration="5000"
        />
</set>

复制代码
  • (2)代码方式

使用AnimationSet这个类。构造方法为 public AnimationSet(boolean shareInterpolator),参数表示是否使用共享的时间插值器。

AlphaAnimation alphaAnimation = new AlphaAnimation(0.0f,1.0f);
alphaAnimation.setDuration(5000);
alphaAnimation.setFillAfter(true);

TranslateAnimation translateAnimation = new TranslateAnimation(Animation.RELATIVE_TO_SELF,0.0f,Animation.RELATIVE_TO_SELF,1.0f,
Animation.RELATIVE_TO_SELF,0.0f,Animation.RELATIVE_TO_SELF,1.0f);
translateAnimation.setDuration(5000);
translateAnimation.setFillAfter(true);

AnimationSet animationSet = new AnimationSet(true);
animationSet.addAnimation(translateAnimation);
animationSet.addAnimation(alphaAnimation);
animationSet.setDuration(5000);
animationSet.setFillAfter(true);
animationView.startAnimation(animationSet);

复制代码

7.简单介绍下动画的一些属性或者方法。

  • [1] repeatMode和repeatCount。repeatMode是重复方式,有两个固定值,xml文件里是restart、reverse。restart是动画重头开始执行,reverse是动画相反着执行,都很好理解。需要注意的一个地方就是在使用AnimationSet或者在xml文件定义多个动画执行的时候,需要单独给每个动画设置这两个属性,给AnimationSet或者xml里set标签设置这两个属性是不生效的!!

  • [2] 时间插值器 (Interpolator)

插值器 简单描述
AccelerateDecelerateInterpolator 默认的Interpolator,先加速再减速
LinearInterpolator 匀速
DecelerateInterpolator 持续减速到0
AnticipateInterpolator 先蓄力下再进行动画
OvershootInterpolator 会超过动画设定部分在回弹回来。
AnticipateOvershootInterpolator AnticipateInterpolator和OvershootInterpolator的结合体
CycleInterpolator 正弦 / 余弦曲线,可以自定义周期
PathInterpolator 可以用path定制
FastOutLinearInInterpolator 加速,内部用的是贝塞尔曲线
FastOutSlowInInterpolator 先加速再减速,内部用的是贝塞尔曲线
LinearOutSlowInInterpolator 持续减速到0,初始速度比DecelerateInterpolator快

关于插值器这块内容可以参考 HenCoder Android 自定义 View 1-6:属性动画 Property Animation(上手篇)

  • [3] setAnimationListener为动画设置监听
animation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                //动画开始
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                //动画结束
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
            //动画重复

            }
        });
复制代码

8.一些使用场景举例

  • (1)用于activity跳转(dialog、popupwindow同理)

我们做一个OneActivity从顶部出去,TwoActicity从底部进入,关闭TwoActivity从底部出去,OneActivity从顶部进来的动画。分别创建四个动画文件,top_out.xml、top_in.xml、bottom_out.xml和bottom_in.xml。代码分别是

top_out.xml
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="5000"
        android:fromYDelta="0%p"
        android:toYDelta="-100%p"/>
</set>
复制代码
top_in.xml
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="5000"
        android:fromYDelta="-100%p"
        android:toYDelta="0%p"/>
</set>
复制代码
bottom_out.xml
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="5000"
        android:fromYDelta="0%p"
        android:toYDelta="100%p"/>
</set>
复制代码
bottom_in.xml
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="5000"
        android:fromYDelta="100%p"
        android:toYDelta="0%p"/>
</set>
复制代码

然后创建两个activity,OneActivity和TwoActivity,代码分别是

public class OneActivity extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_one);
        Button button = findViewById(R.id.btn);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(OneActivity.this,TwoActivity.class);
                startActivity(intent);
                overridePendingTransition(R.anim.top_out,R.anim.bottom_in);
            }
        });
    }
}

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <Button
        android:id="@+id/btn"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:text="跳转TwoActivity"
        android:layout_width="match_parent"
        android:layout_height="50dp"/>

</android.support.constraint.ConstraintLayout>
复制代码
public class TwoActivity extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_two);
    }

    @Override
    public void finish() {
        super.finish();
        overridePendingTransition(R.anim.bottom_out,R.anim.top_in);
    }
}

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:text="我是TwoActivity"/>

</android.support.constraint.ConstraintLayout>
复制代码
  • (2)layoutanimation(ViewGroup加载内部view或者ViewGroup的动画)

有两个属性说下,animationOrder和delay。animationOrder:动画执行顺序。有三个值ORDER_NORMAL、ORDER_REVERSE、ORDER_RANDOM,默认值是有三个值ORDER_NORMAL,分别是顺序,倒序,随机。delay:动画的延迟,float类型,是你所有设置动画的duration的周期的倍数。内部计算公式为child animation delay = child index * delay * animation duration。

首先在res-anim创建一个动画文件,然后在创建一个layoutanimation的动画文件,在ViewGroup的属性设置android:layoutAnimation="@anim/right_layout_animation",最后正常打开ViewGroup就可以显示动画啦。需要注意的是这个动画只能在layout文件里定义的view或者ViewGroup有效果。如果在代码里使用addview这个方法添加的view或者ViewGroup都不会生效。即使给ViewGroup设置android:animateLayoutChanges="true",只会使用系统默认的动画,自己设置的动画不会生效!!代码如下

right_in_alpha.xml
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="5000"
        android:fromXDelta="100%p"
        android:toXDelta="0%p"/>
    <alpha
        android:duration="5000"
        android:fromAlpha="0.1"
        android:toAlpha="1.0"/>
</set>
复制代码
right_layout_animation.xml
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
    android:animation="@anim/right_in_alpha"
    android:animationOrder="normal"
    android:delay="0.5">

</layoutAnimation>
复制代码

以上所述就是小编给大家介绍的《Android动画解析(一)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Rust编程之道

Rust编程之道

张汉东 / 电子工业出版社 / 2019-1 / 128

Rust 是一门利用现代化的类型系统,有机地融合了内存管理、所有权语义和混合编程范式的编程语言。它不仅能科学地保证程序的正确性,还能保证内存安全和线程安全。同时,还有能与C/C++语言媲美的性能,以及能和动态语言媲美的开发效率。 《Rust编程之道》并非对语法内容进行简单罗列讲解,而是从四个维度深入全面且通透地介绍了Rust 语言。从设计哲学出发,探索Rust 语言的内在一致性;从源码分析入......一起来看看 《Rust编程之道》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具