微信号:ardays

介绍:android每日绝对干货

模仿荷包启动动画

2016-08-23 20:15 咖枯

(我利威尔兵长好帅)



gif效果图:

        

实现思路:

        仔细观察,可以看出动画的执行分为两个阶段:

        第一阶段为硬币掉落。

        第二阶段为钱包反弹。


布局xml文件如下:

        

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout 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"            tools:context=".MainActivity">    <ImageView        android:id="@+id/coin_iv"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center"        android:src="@mipmap/coin"/>   <ImageView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center"        android:layout_marginBottom="70dp"        android:layout_marginLeft="70dp"        android:src="@mipmap/version"/>    <ImageView        android:id="@+id/wallet_iv"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center"        android:src="@mipmap/wallet"/>    <Button        android:id="@+id/start_btn"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center|bottom"        android:layout_marginBottom="10dp"        android:text="start"/>

</FrameLayout>


硬币掉落:

        硬币掉落的过程中执行两种动画,位移和旋转。

        位移动画使用了补间动画,xml文件如下:


<?xml version="1.0" encoding="utf-8"?>

<translate    xmlns:android="http://schemas.android.com/apk/res/android"    android:fromYDelta="-50%p"    android:interpolator="@android:anim/accelerate_interpolator"    android:toYDelta="0%"/>


旋转动画采用了重写Animation并利用android.hardware.Camera类来实现。

    

public class ThreeDRotateAnimation extends Animation {         int centerX, centerY;      Camera camera = new Camera();       @Override       public void initialize(int width, int height, int parentWidth,  int parentHeight) {                super.initialize(width, height, parentWidth, parentHeight);              // 中心点坐标            centerX = width / 2;              centerY = height / 2;              setDuration(500);              setInterpolator(new LinearInterpolator());         }         @Override   

     protected void applyTransformation(float interpolatedTime, Transformation t) {               final Matrix matrix = t.getMatrix();            camera.save();            // 绕y轴旋转            camera.rotateY(360 * interpolatedTime);              camera.getMatrix(matrix);              // 设置翻转中心点            matrix.preTranslate(-centerX, -centerY);            matrix.postTranslate(centerX, centerY);                camera.restore();            } }


        这里简单说下animation里面的preTranslate和postTranslate方法,preTranslate是指在rotateY前平移,postTranslate是指在rotateY后平移,注意他们参数是平移的距离,而不是平移目的地的坐标!
由于旋转是以(0,0)为中心的,所以为了把硬币的中心与(0,0)对齐,就要preTranslate(-centerX, -centerY), rotateY完成后,调用postTranslate(centerX, centerY),再把图片移回来,这样看到的动画效果就是硬币从中心不停的旋转了。


最后同时执行以上两种动画,实现掉落旋转效果。

private void startCoin() 

{

    // 掉落

    Animation animationTranslate = AnimationUtils.loadAnimation(this,R.anim.anim_top_in);

    // 旋转

    ThreeDRotateAnimation animation3D = new ThreeDRotateAnimation();     animation3D.setRepeatCount(10);     AnimationSet animationSet = new AnimationSet(true);     animationSet.setDuration(800);     animationSet.addAnimation(animation3D);     animationSet.addAnimation(animationTranslate);     mCoinIv.startAnimation(animationSet); }



钱包反弹:

在执行硬币掉落的同时,启动一个ValueAnimator动画,来判断钱包反弹的时机。

private void setWallet() {         final ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 1);         valueAnimator.setDuration(800);         valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {           @Override   

         public void onAnimationUpdate(ValueAnimator animation) {        

        float fraction = animation.getAnimatedFraction();       

         // 大概掉落到钱包的上边缘位置的时候,取消ValueAnimator动画,并执行钱包反弹效果        if (fraction >= 0.75) {            valueAnimator.cancel();            startWallet();        }   }}); valueAnimator.start(); }


最后执行钱包反弹效果动画,这里采用了ObjectAnimator 。

private void startWallet() {    // x轴缩放    ObjectAnimator objectAnimator1 = ObjectAnimator.ofFloat(mLogoIv, "scaleX", 1, 1.1f, 0.9f, 1);    objectAnimator1.setDuration(600);    // y轴缩放      ObjectAnimator objectAnimator2 = ObjectAnimator.ofFloat(mLogoIv, "scaleY", 1, 0.75f, 1.25f, 1);    objectAnimator2.setDuration(600);    AnimatorSet animatorSet = new AnimatorSet();    animatorSet.setInterpolator(new LinearInterpolator());   // 同时执行x,y轴缩放动画    animatorSet.playTogether(objectAnimator1, objectAnimator2);    animatorSet.start();

}


  今天的干货就到这里了,每天有各种干货等着你.各种实用的Demo等着你下载。喜欢的用户可以长按下图的二维码进行关注哦.


 
Android每日干货 更多文章 android日常开发总结的技术经验60条 还在用Android自带的WebView组件?太Out了! Activity切换淡入淡出效果 想要视频,demo的小伙伴看这里啊~ 5步搞定android混淆
猜您喜欢 写作与编程 7个未来WEB设计的趋势 中国互联网技术联盟推出首个“互联网+”资讯门户 杂谈 | 走自己的路,但请快乐 百度地图API自定义地图