模仿荷包启动动画

作者: 咖枯 | 来源:发表于2016-08-20 12:50 被阅读3408次

用荷包App的时候发现启动动画做的挺好玩的,于是便模仿实现了一下。
gif效果图:

animation.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();}

这样一个简单的荷包启动动画效果就差不多出来了,唯一遗憾的是对钱包进行y轴缩放的时候会对整个y轴进行缩放,要想保持钱包底部不动,只有钱包上部反弹,暂时还没有想到什么好的方法,小弟不才还望大神赐教!谢谢!

完整源码:

完整源码在GitHub
如果觉得还不错,记得star╰( ̄▽ ̄)╮哟~

相关文章

网友评论

  • fendo:赞一个
  • 752fb133dfa5:再说一个了 ,导包写错了,不是android.hardware.Camera,而是android.graphics.Camera
    咖枯: @水手怕水 多谢提醒!
  • 752fb133dfa5:事实证明那个旋转动画 荷包用的是帧动画.....
    咖枯: @水手怕水 嗯,帧动画太麻烦了要做很多的图片不停的切换,费时费力...
  • d0373c94e1af:荷包靠谱不
  • 逸沉PLUS:Github怎么没有MainActivity
    咖枯:@ArcherZheng 更新了
    逸沉PLUS:@咖枯 谢谢 :smile:
    咖枯:@ArcherZheng 好像上传时的问题,没注意到,晚上补上
  • coco猫:怎么感觉好像工程不全。。。
    咖枯:@ArcherZheng 好像上传时的问题,晚上补上
    逸沉PLUS:@咖枯 没有MainActivity
    咖枯:@coco猫 github上有完整源码
  • GoodGoodStuday:牛气啊博主,那荷包首页那动画,会吗?就是滑动页面的时候,头像变小,
    咖枯:@小宝拜财神 应该可以吧,你查下吧
    GoodGoodStuday:@咖枯 但是头像 不能在中间啊
    咖枯:@小宝拜财神 从效果上看用coordinatorlayout可以实现吧
  • bba41115bf3e:楼主我可以转载吗
    bba41115bf3e:@小志嘛i 谢谢你支持
    咖枯:@小志嘛i 可以呀 哈哈
  • 捡淑:马克

本文标题:模仿荷包启动动画

本文链接:https://www.haomeiwen.com/subject/awxisttx.html