Animation补间动画四个基本值介绍

animation 动画。

android 自带的动画由四个属性控制,alpha,scale,translate,rotate;

基本值.png

alpha:渐变透明度动画效果;

scale:渐变尺寸伸缩动画效果;

translate:画面位置移动动画效果‘

rotate:画面转移旋转动画效果;

动画存放位置,res/anim

关于后面讲解的动画执行的位置图片解,


位置介绍.png

属性讲解:

scale 调节尺寸

YP5{Y6JYNFO1.png

第一个Demo
在res--anim创建一个xml,这里我命名为start.xml

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
<!--动画执行时初始化的长度-->
android:fromXScale="0.0"
<!--动画执行后x轴的长度,以1.0为不变,比这个值大就放大,反之缩小-->
android:toXScale="1.0"
<!--动画执行时初始化的高度-->
android:fromYScale="0.0"
<!--动画执行后Y轴的长度,以1.0为不变,比这个值大就是方法,反之缩小-->
android:toYScale="1.0"
<!--百分比是控件本身长度的百分比,X是指动画从X轴的那个位置开始展示-->
android:pivotX="100%"
<!--百分比是控件本身高度度的百分比,Y是指动画从Y轴的那个位置开始展示-->
android:pivotY="50%"
<!--动画执行后是否保持当前状态-->
android:fillAfter="true"
<!-- 动画持续时间,以毫秒为单位 -->
android:duration="700" 
<!-- 动画重复执行多少次 ,注意:是重复3次,不是执行三次,这里选择3,就会执行4次,一次是你点击的 -->
    android:repeatCount="3"
<!-- 动画重复的类型,reverse是执行后按照原来的路径回放,,restart是默认的类型,就是执行完后又重新开始。注意:选择reverse的类型时候,回放而是算repeatCount的次数的,上面重复执行3次,选reverse就会放大两次,回放两次-->
 android:repeatMode="reverse/restart"
/>

下面是布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
    >

<Button android:id="@+id/btn_animation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dip"
    android:text="scale animation"/>
<TextView
    android:id="@+id/tv"
    android:layout_width="100dip"
    android:layout_height="200dip"
    android:background="#ff00ff"
    android:text="hello_world"
    android:layout_gravity="center_horizontal"/>

</LinearLayout>

MianActivity里的代码,后面的demo的就不贴了,只是改了动画文件

public class MainActivity extends Activity {
    Animation scaleAnimation;
    TextView tv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        scaleAnimation = AnimationUtils.loadAnimation(this, R.anim.start);
        tv =(TextView)findViewById(R.id.tv);
        findViewById(R.id.btn_animation).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                tv.startAnimation(scaleAnimation);
            }
        });
    }

}

说了scale,下面来说alpha 透明度

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
//这是开始执行动画时的透明度 从0.0 --1.0 ,0.0表示全透明,1.0表示完全不透明
    android:fromAlpha="1.0"
//这是动画执行后的透明度
    android:toAlpha="0.1"
//动画执行的时间
    android:duration="1000"
//重复次数
android:repeatCount ="2"
//重复类型,reverse/restar(解释看之前的start.xml)
    android:repeatMode="restart"
    android:fillAfter="true"
  //动画执行后是否还愿,这是默认值,可以不用设置。如果设置了fillAfter这个效果就会失效
    android:fillBefore="true">

</alpha>

rotate 旋转

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
//初始角度
    android:fromDegrees="0"
//旋转角度
    android:toDegrees="-380"
//X轴中心
    android:pivotX="50%"
//Y轴中心
    android:pivotY="50%"
//执行动画时间
    android:duration="200"
//执行多少次
    android:repeatCount ="10"
//重复类型
    android:repeatMode="reverse"
//执行后是否返回原来状态
    android:fillAfter="true">
</rotate>

translate 平移

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"

    //x轴动画执行时的位置 就是第一张图片的 x:0 y:0。
    android:fromXDelta="0"
    //X轴执行的方向
    android:toXDelta="-80"
    //y轴动画执行时的位置
    android:fromYDelta="0"
    //Y轴执行的方向
    android:toYDelta="-80"
    //动画执行的时间
    android:duration="2000"
//是否恢复默认状态
    android:fillBefore="true"
    >
</translate>
位置介绍.png

这里需要对toXDelta/toYDelta的进行讲解一下,这里x轴是-80;y轴也是-80,在的红色框就是你的控件初始化位置,从图中可以看出,控件默认的位置都是X轴为正,Y轴为负,本身处于第四象限,根据初中知识,当你给X轴一个-80的时候,就代表你要X向负数方向移动;而y轴为本身就是负数,负负为正,于是本来是负数的Y轴现在变成正数,向上移动。X轴为负,Y轴为正,那么这段动画该向第二象限移动。
可以改变着两个值进行测试一下。

基本介绍结束。
1094290855_0_0_0_71C1AAB2FF707307599DA40D9917BF32.jpg
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容