Tween动画
abdroid提供了两种动画:Tween金额Fram动画,下面介绍第一种:
Tween动画是通过对view的内容通过一系列的图形变化(包括平移、缩放、旋转、改变透明度)来实现动画效果。动画效果可以在xml文件里做,也可以采用编码来做:
下面的demo实现了2种方法,即,1、在代码里实现;2、在src文件下创建anim文件,用XML里实现
首先大家看一下布局:就是5个按键,点击按键的时候Imgeview图片做相应的动作。
<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:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:orientation="vertical" tools:context="com.example.animationdemo.MainActivity$PlaceholderFragment" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <Button android:id="@+id/b1" android:layout_width="48dp" android:layout_height="wrap_content" android:text="透明" /> <Button android:id="@+id/b2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="旋转" /> <Button android:id="@+id/b3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="缩放" /> <Button android:id="@+id/b4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="平移" /> <Button android:id="@+id/b5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="组合" /> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" android:gravity="center_horizontal|center_vertical" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/im" android:src="@drawable/zp" /> </LinearLayout> </LinearLayout>
2、下面看看在xml文件下定义动画结构图:
因为在前面定义的透明、平移、旋转、缩放最后都复制到了set的组合动画文件里了,这里就只给出set的xml文件
<?xml version="1.0" encoding="utf-8"?> <set> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:fromDegrees="0" android:toDegrees="360" android:duration="2000" android:pivotX="50%" android:pivotY="50%" android:repeatCount="1" > </rotate> <alpha xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:fromAlpha="0" android:toAlpha="1" android:repeatCount="1" android:duration="1000" > </alpha> <scale android:fromXScale="0" android:toXScale="1" android:fromYScale="0" android:toYScale="1" android:duration="2000" android:repeatCount="1" xmlns:android="http://schemas.android.com/apk/res/android"> </scale> <translate android:fromXDelta="-100" android:toXDelta="150" android:fromYDelta="-100" android:toYDelta="150" android:duration="2000" android:repeatCount="1" xmlns:android="http://schemas.android.com/apk/res/android"> </translate> </set>
最终我们用2种方式实现了前面四个按键的操作,和第5个组合动画操作:
public class MainActivity extends ActionBarActivity implements OnClickListener { private Button bt1,bt2,bt3,bt4,bt5; private ImageView im; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); bt1=(Button) findViewById(R.id.b1); bt2=(Button) findViewById(R.id.b2); bt3=(Button) findViewById(R.id.b3); bt4=(Button) findViewById(R.id.b4); bt5=(Button) findViewById(R.id.b5); im=(ImageView) findViewById(R.id.im); bt1.setOnClickListener(this); bt2.setOnClickListener(this); bt3.setOnClickListener(this); bt4.setOnClickListener(this); bt5.setOnClickListener(this); } @Override public void onClick(View v) { switch (v.getId()) { case R.id.b1: // AlphaAnimation animation=new AlphaAnimation(0f, 1f); // animation.setDuration(2000); // im.startAnimation(animation); Animation animation=AnimationUtils.loadAnimation(this, R.anim.amalpha); im.startAnimation(animation); break; case R.id.b2: // RotateAnimation animation2=new RotateAnimation(0,360); // RotateAnimation animation2=new RotateAnimation(0, 360, 200, 200); // RotateAnimation animation2 =new RotateAnimation(0f,360f,Animation.RELATIVE_TO_SELF, 0.5f,Animation.RELATIVE_TO_SELF,0.5f); // animation2.setDuration(2000); // im.startAnimation(animation2); Animation animation2=AnimationUtils.loadAnimation(this, R.anim.roanimation); im.startAnimation(animation2); break; case R.id.b3: // ScaleAnimation animation3 =new ScaleAnimation(0f, 2f, 0f, 1f); // animation3.setDuration(2000); // im.startAnimation(animation3); Animation animation3=AnimationUtils.loadAnimation(this, R.anim.scaleanimation); im.startAnimation(animation3); break; case R.id.b4: //第一个参数为动画平移相对于图片所在位置x的偏移量,第二个参数为目标地点位置离原来的位置的x偏移量,后面的y同理 // TranslateAnimation animation4=new TranslateAnimation(-100, 200, -100, 200); //// RotateAnimation animation3=new RotateAnimation(0,90); // animation4.setDuration(2000); // im.startAnimation(animation4); Animation animation4=AnimationUtils.loadAnimation(this, R.anim.animationtran); im.startAnimation(animation4); break; case R.id.b5: Animation animation5=AnimationUtils.loadAnimation(this, R.anim.set); im.startAnimation(animation5); break; default: break; } } }
二、 为了简单也可以直接用代码实现,下面是用代码实现淡入淡出的动画: