安卓动画系列之属性动画实现跳起落下圆圈运动

最近看了淘宝手机端的有些页面是类似下面这个小球的加载效果。后来了解了下,淘宝是直接一个gif图片实现效果的,,这当然是最简单的方法。为了加深了解属性动画,这次就做个类似的效果。这依旧由几个简单的属性动画组合在一起,所有动画都在代码里实现了。看注释就好。

上个效果图:

实现代码:

小球圆圈的XML文件 drawable_dot.xml:

<?xml version="1.0" encoding="utf-8" ?><shape xmlns:android=""android:shape="oval"><sizeandroid:height="40dp"android:width="40dp"/><solidandroid:color="#D2691E"/></shape>Activity的布局文件,就是一个ImageView:

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android=""android:layout_width="match_parent" android:layout_height="match_parent"><ImageViewandroid:id="@+id/imv_tb_dot1"android:layout_width="20dp"android:layout_height="20dp"android:layout_centerInParent="true"android:src="@drawable/drawable_dot"/></RelativeLayout>主类MainActivity:

package com.alextam.circlemoveball;import android.animation.Animator;import android.animation.AnimatorSet;import android.animation.ValueAnimator;import android.media.Image;import android.support.v7.app.ActionBarActivity;import android.os.Bundle;import android.view.Menu;import android.view.MenuItem;import android.widget.ImageView;/** * @author Alex Tam */public class MainActivity extends ActionBarActivity {private ImageView imv1;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);imv1= (ImageView)findViewById(R.id.imv_tb_dot1);setCircleMoveBall();}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {// Inflate the menu; this adds items to the action bar if it is present.getMenuInflater().inflate(R.menu.menu_main, menu);return true;}@Overridepublic boolean onOptionsItemSelected(MenuItem item) {// Handle action bar item clicks here. The action bar will// automatically handle clicks on the Home/Up button, so long// as you specify a parent activity in AndroidManifest.xml.int id = item.getItemId();//noinspection SimplifiableIfStatementif (id == R.id.action_settings) {return true;}return super.onOptionsItemSelected(item);}/*** 设置小球动画*/private void setCircleMoveBall(){ValueAnimator animatorMove = ValueAnimator.ofInt(0,200);animatorMove.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {imv1.setTranslationX((Integer) animation.getAnimatedValue());}});animatorMove.setDuration(1000);ValueAnimator animatorMoveScale = ValueAnimator.ofFloat(0.0f,100.0f);animatorMoveScale.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {float value = (Float)animation.getAnimatedValue();//将动画的小球运动分解为2部,当0.0f – 50.0f小球变大,后面一半50.0f-100.0f小球从大恢复正常//这里效果看起来是小球从平面向屏幕弹起的样子if(value<= 50.0f){imv1.setScaleX(1.0f + value/50);imv1.setScaleY(1.0f + value/50);}else{imv1.setScaleX(1.0f – (value – 100.0f)/50);imv1.setScaleY(1.0f – (value – 100.0f)/50);}}});animatorMoveScale.setDuration(1000);ValueAnimator animatorBackMove = ValueAnimator.ofInt(200,0);animatorBackMove.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {imv1.setTranslationX((Integer) animation.getAnimatedValue());}});animatorBackMove.setDuration(2000);ValueAnimator animatorBackScale = ValueAnimator.ofFloat(0.0f,-100.0f);animatorBackScale.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {float value = (Float)animation.getAnimatedValue();float vluA,vluB;//同样是将小球分解两步,效果就是动画中的往后变小,透明度逐渐变低,然后恢复正常大小和透明度的效果if( value > -50.0f && value < 0){vluA = 1.1f + value/50;imv1.setAlpha(vluA);imv1.setScaleX(vluA);imv1.setScaleY(vluA);}else{vluB = 0.1f – (value + 50.0f)/50;imv1.setAlpha(vluB);imv1.setScaleX(vluB);imv1.setScaleY(vluB);}}});animatorBackScale.setDuration(2000);final AnimatorSet set = new AnimatorSet();//设置几个动画的运动规则set.play(animatorMove).with(animatorMoveScale);set.play(animatorMoveScale).before(animatorBackMove);set.play(animatorBackMove).with(animatorBackScale);set.addListener(new Animator.AnimatorListener() {@Overridepublic void onAnimationStart(Animator animation) {}@Overridepublic void onAnimationEnd(Animator animation) {//在这里实现重复运动set.start();}@Overridepublic void onAnimationCancel(Animator animation) {}@Overridepublic void onAnimationRepeat(Animator animation) {}});set.start();}}所有方法的说明,其实都能在上篇找到注释说明。但是这里强调一个地方,就是AnimatorSet这个类,并没有直接提供了类似Animator的setRepeatCount() 和setRepeatMode()方法,所以如果在AnimatorSet中要实现不断重复的播放动画,就要借助AnimatorListener接口,在动画结束( end )的时候去重新调用set.start() 方法。 当然,如果AnimatorSet中的Animator已经设置了重复次数和重复模式,在AnimatorSet中依然是有效的。动画虽然简陋了些,但稍作修饰,也可以作为页面加载的动画使用,同时加深对原理的认识,在以后的使用中会更加熟练哦。大家多多练习,加油!

如果发现错了,一定要止步.

安卓动画系列之属性动画实现跳起落下圆圈运动

相关文章:

你感兴趣的文章:

标签云: