android打开app动画,Android仿荷包APP启动动画

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

gif效果图:

ddd7aab51d1f31df3528204f12d9f769.gif

animation.gif

实现思路:

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

第一阶段为硬币掉落。

第二阶段为钱包反弹。

布局xml文件如下:

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

tools:context=".MainActivity">

android:id="@+id/coin_iv"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:src="@mipmap/coin"/>

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"/>

android:id="@+id/wallet_iv"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:src="@mipmap/wallet"/>

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"/>

硬币掉落:

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

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

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╰( ̄▽ ̄)╮哟~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值