Android仿荷包APP启动动画

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

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

(0)

相关推荐

  • Android软件启动动画及动画结束后跳转的实现方法

    本文实例讲述了Android软件启动动画及动画结束后跳转的实现方法.分享给大家供大家参考,具体如下: 自己写了个小程序,软件启动时,先显示几张图片,每3秒显示一张,图片显示完跳转到首页 1. 图片轮播使用Gallery,用法很简单 GalleryAdapter adapter = new GalleryAdapter(this, mIds); mGallery.setAdapter(adapter); GalleryAdapter是自定义适配器 public class GalleryAdapt

  • Android启动引导页使用ViewPager实现

    我们在安装某个APP的时候,基本都会有一个引导页的提示,他们可以打广告,或者介绍新功能的加入和使用说明等. 一般都支持滑动并且下面有几个点,显示共有多少页和当前图片的位置,在IOS上这个实现起来比较简单,但在安卓上如何实现呢. 今天就和大家一起来学习用官方v4支持包下的ViewPager来实现这个效果. 先上图: 下面是我的实现,一个xml布局,一个GuideActivity和一个GuidePageAdapter.  先上XML. <?xml version="1.0" enco

  • Android启动画面的实现方法

    本文实例讲述了Android启动画面的实现方法.分享给大家供大家参考.具体分析如下: 在应用程序中经常用到启动画面,会启动一个后台线程为主程序的运行准备资源. Android要实现启动画面可以这样做: 这是splash.xml布局文件的代码: 复制代码 代码如下: <LinearLayout   xmlns:android="http://schemas.android.com/apk/res/android"   android:layout_height="fill

  • 详解Android中App的启动界面Splash的编写方法

    一.Splash界面的作用 用来展现产品的Logo 应用程序初始化的操作 检查应用程序的版本 检查当前应用程序是否合法注册 二.界面的xml定义 写一个布局背景设置为产品的logo图片,再添加一个textview显示版本号. <TextView android:id="@+id/tv_splash_version" android:layout_width="wrap_content" android:layout_height="wrap_cont

  • Android简单实现启动画面的方法

    本文实例讲述了Android简单实现启动画面的方法.分享给大家供大家参考,具体如下: 核心代码: package com.demo.app; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.os.Handler; public class SplashActivity extends Activity { private final int S

  • Android编程之简单启动画面实现方法

    本文实例讲述了Android简单启动画面实现方法.分享给大家供大家参考,具体如下: 每个Android应用程序启动之后都会出现一个Splash启动界面,显示产品LOGO.公司LOGO或者开发者信息.如果应用程序启动时间比较长,那么启动界面就是一个很好的东西,可以让用户耐心等待这段枯燥的时间,提高用户体验. 1. splash.xml布局文件 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android&q

  • Android 避免APP启动闪黑屏的解决办法(Theme和Style)

    前几天Boss就反应说,机器每次启动程序都会闪一下黑屏,这个客户不接受.没办法,只能想想怎么解决,最后找到了下面的方法.闪黑屏的原因主要是我们启动Activity的时候,需要跑完onCreate和onResume才会显示界面.也就是说需要处理一些数据后,才会显示.按照这种思路,是不是我把初始化的工作尽量减少就可以避免黑屏?事实是,就算你onCreate啥都不做,仍然会闪一下黑屏,因为初始化解析界面时需要一定时间.下面是解决办法:1.自定义Theme 复制代码 代码如下: 设置背景图Theme<s

  • Android优化应用启动速度

    一.应用的启动 启动方式 通常来说,在安卓中应用的启动方式分为两种:冷启动和热启动. 1.冷启动:当启动应用时,后台没有该应用的进程,这时系统会重新创建一个新的进程分配给该应用,这个启动方式就是冷启动. 2.热启动:当启动应用时,后台已有该应用的进程(例:按back键.home键,应用虽然会退出,但是该应用的进程是依然会保留在后台,可进入任务列表查看),所以在已有进程的情况下,这种启动会从已有的进程中来启动应用,这个方式叫热启动. 特点 1.冷启动:冷启动因为系统会重新创建一个新的进程分配给它,

  • Android app启动时黑屏或者白屏的原因及解决办法

    1.产生原因 其实显示黑屏或者白屏实属正常,这是因为还没加载到布局文件,就已经显示了window窗口背景,黑屏白屏就是window窗口背景. 示例: 2.解决办法 通过设置设置Style (1)设置背景图Theme 通过设置一张背景图. 当程序启动时,首先显示这张背景图,避免出现黑屏 <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <item name=&qu

  • Android仿荷包APP启动动画

    用荷包App的时候发现启动动画做的挺好玩的,于是便模仿实现了一下. gif效果图: animation.gif 实现思路: 仔细观察,可以看出动画的执行分为两个阶段: 第一阶段为硬币掉落. 第二阶段为钱包反弹. 布局xml文件如下: <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/an

  • Android 仿余额宝数字跳动动画效果完整代码

    一:想都不用想的,有图有真相,看着爽了,在看下面源码 二:实例源码分析 ①:首先定义接口 package com.demo.tools.view; /** * 数字动画自定义 * * @author zengtao 2015年7月17日 上午11:48:27 * */ public interface RiseNumberBase { public void start(); public RiseNumberTextView withNumber(float number); public R

  • Android仿打开微信红包动画效果实现代码

    首先看下效果: 实现原理: 准备3张不同角度的图片,通过AnimationDrawable帧动画进行播放即可 代码实现: 1.编写动画xml文件: <?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false&

  • Android 优化之app启动优化的实现

    App 启动方式 冷启动 App 没有启动过或 App 进程被杀,系统中不存在该 App 进程,此时启动即为冷启动.需要创建 App 进程,加载相关资源,启动 Main Thread,初始化首屏 Activity 等.在这个过程中,屏幕会显示一个空白的窗口(颜色基于主题),直至首屏 Activity 完全启动. 热启动 热启动意味着 App 进程只是处于后台,系统只是将其从后台带到前台展示给用户.类同与冷启动,在这个过程中,屏幕会显示一个空白的窗口(颜色基于主题),直至 activity 渲染完

  • Android自定义View app更新动画详解

    为了做一个有温度的IT男,我决定在以后的文章中给大家分享一些看到的,听到的一些东西,如果你不喜欢请留言让我知道,如果你喜欢请点个赞.你也可留言写下自己想分享的东西,温暖你我他.这次分享的是一首歌,毛不易的<消愁>,分享这首歌主要是这首歌的歌词,借用薛之谦的评价:"我是研究歌词的人,我研究了十几年,但是你写到我想给你跪!",下面贴部分歌词供大家欣赏 一杯敬朝阳,一杯敬月光 唤醒我的向往,温柔了寒窗 于是可以不回头的逆风飞翔 不怕心头有雨,眼底有霜 一杯敬故乡,一杯敬远方 守着

  • Android仿硬币转动微信红包动画效果

    项目需要研究了一下微信红包动画,即硬币转动的效果,原理其实就是三张不同角度的图片利用AnimationDrawable帧动画进行播放,在参考了案例之后,给自己记录一下完成的过程. 1,在XML文件中定义动画: 步骤如下: ①新建 Android 项目 ②在drawable目录中新建一个anim.xml(注意文件名小写) <?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:andr

  • Android自定义带加载动画效果的环状进度条

    最近闲来无事,自定义了一个环状进度条,话不多说直接上代码 : public class CircleProgressView extends View{ private Paint mCirPaint; private Paint mArcPaint; private Paint mTextPaint; private float radius=200; private int textsize=60; private int progress=68; private int stokeWidt

  • 通过FancyView提供 Android 酷炫的开屏动画实例代码

    效果 使用 compile 'site.gemus:openingstartanimation:1.0.0' //在gradle中导入项目 OpeningStartAnimation openingStartAnimation = new OpeningStartAnimation.Builder(this) .setDrawStategy(new NormalDrawStrategy()) //设置动画效果 .create(); openingStartAnimation.show(this)

  • Android实现过渡动画、引导页 Android判断是否第一次启动App

    目前的App在安装后,第一次打开,都会显示两秒左右的logo,然后进入引导页.如果关闭App,再重新打开,则只会显示logo,然后直接进入主页. 最近写了这个,记录一下. 首先是过渡动画,因为它不论App是否第一次启动都会显示. 这里我使用了Handler的postDelayed()方法.把过渡动画的Activity设为默认启动的Activity.在当前Activity中,执行postDelayed()方法,把延时的时长设为两秒即可. 过渡页面如下:transition_view.xml <?x

  • Android实现仿今日头条点赞动画效果实例

    目录 一.前言 二.需求拆分 三.实现方案 1.点赞控件触摸事件处理 2.点赞动画的实现 2.1.点赞效果图片的获取和存储管理 2.2.点赞表情图标动画实现 2.3.点赞次数和点赞文案的绘制 3.存放点赞动画的容器 4.启动动画 四.遇到的问题 五.实现效果 六.完整代码获取 七.参考和感谢 总结 一.前言 我们在今日头条APP上会看到点赞动画效果,感觉非常不错,正好公司有点赞动画的需求,所以有了接下来的对此功能的实现的探索. 二.需求拆分 仔细观察点赞交互,看出大概以下几个步骤: 1:点赞控件

随机推荐