登录 立即注册
安币:

安卓巴士 - 安卓开发 - Android开发 - 安卓 - 移动互联网门户

一个绚丽的注册动画

[复制链接]
来自: MrlLee 分类: Android精品源码 上传时间: 2016-9-5 16:10:53
Tag:android version success 透明度 动画
立即下载
收藏

项目介绍:

动画分析整个动画流程分成下面三部分来单独实现:
  • 注册按钮点击后的扩散动画
  • 网络请求动画
  • 主页面动画
扩散动画:当用户点击注册按钮后,整个按钮呈圆形扩散直至铺满整个屏幕。
网络请求动画可以分为以下几个部分:
  • signUp文字入场动画:文字从下往上平移,同时播放缩放动画,并且透明度逐渐加深。
  • 白线延长动画,线条向右延伸,
  • success文字入场动画,同时伴随sign up文字的出场动画,由左往右移动与sign up碰撞后减速停止,sign up向右移动并消失,俩个文字透明度皆发生变化。
请求网络动画播放成功后跳转到主页面,主页的Tab栏由铺满整个屏幕逐渐变小到原始高度,并且Tab栏的俩个菜单按钮透明度也发生变化。
2、注册按钮后的扩散动画点击注册按钮后,显示动画播放view,开始播放缩放动画。
整个缩放动画就是一个圆形的view的放大动画,将该view的背景设置为shape即可实现圆形效果。
圆形view的背景代码:
[XML] 查看源文件 复制代码



    
    

扩散动画代码:
[Java] 查看源文件 复制代码
public static void spreadAni(View target, float endScale, SimpleAnimatorListener endListener)[/font]    {
        ObjectAnimator scaleXAnimator = ObjectAnimator.ofFloat(target, "ScaleX", endScale);
        scaleXAnimator.setInterpolator(new AccelerateInterpolator());

        ObjectAnimator scaleYAnimator = ObjectAnimator.ofFloat(target, "ScaleY", endScale);
        scaleYAnimator.setInterpolator(new AccelerateInterpolator());

        AnimatorSet animSet = new AnimatorSet();
        animSet.play(scaleXAnimator).with(scaleYAnimator);
        animSet.setDuration(500);
        animSet.start();

        animSet.addListener(endListener);
    }
整个扩散(放大)动画分成俩个属性动画,分别播放view在x方向和y方向的缩放动画,该动画最重要的地方在于计算最终放大比例,因为我们在布局文件中,缩放view的位置并没有在整个动画的正中间,还是向上偏移了一点,所以最终缩放值在计算结果的基础上加1,否则动画结束后背景颜色无法铺满整个屏幕:
[Java] 查看源文件 复制代码
   //计算扩散动画最终放大比例[/font]    private float getScale()
    {
        //原始扩散圆的直径
        int orgWidth = v_spread.getMeasuredWidth();

        int width = getMeasuredWidth();
        int height = getMeasuredHeight();

        //扩散圆最终扩散的圆的半径
        float finalDiameter = (int) (Math.sqrt(width * width + height * height));

        //因为圆未居中,所以加1
        return finalDiameter / orgWidth + 1;
    }
3、网络请求动画扩散动画播放结束后开始播放网络请求动画。整个过程分成三部分,下面分别讲解实现方法。
3.1 signUp入场动画文字扩散动画后结束后紧接着播放singUp的入场动画,给动画设置监听,在监听的onAnimationEnd(Animator animation)中开始入场动画。
入场动画代码:
[Java] 查看源文件 复制代码
   /**[/font]     * sign up文字入场动画
     *
     * @param target      需要播放动画的view
     * @param endListener 动画监听
     */
    public static void signUpTextInAni(View target, SimpleAnimatorListener endListener)
    {
        target.setVisibility(View.VISIBLE);

        int targetHeight = target.getMeasuredHeightAndState();

        ObjectAnimator scaleX = ObjectAnimator.ofFloat(target, "ScaleX", 0.75f, 0.87f, 1f, 1.1f, 1.0f);
        ObjectAnimator scaleY = ObjectAnimator.ofFloat(target, "ScaleY", 0.75f, 0.87f, 1f, 1.1f, 1.0f);
        ObjectAnimator translationAni = ObjectAnimator.ofFloat(target, "TranslationY", targetHeight * 0.8f, -targetHeight * 0.2f, 0);
        ObjectAnimator alphaAni = ObjectAnimator.ofFloat(target, "Alpha", 0.5f, 1.0f);

        AnimatorSet animatorSet = new AnimatorSet();

        animatorSet.playTogether(scaleX, scaleY, translationAni, alphaAni);
        animatorSet.setDuration(2000);
        animatorSet.start();

        animatorSet.addListener(endListener);
    }
动画开始播放时,将signUp文字(简称注册文字,下同)显示,通过AnimatorSet的playTogether()方法同上开启四格动画,即注册文字的缩放动画(x、y方向)、Y方向的平移动画,透明度提升动画。其中,缩放动画从0.75倍放大到1.1倍大小后再缩放回原始大小(1.0倍),这样实现一个放大膨胀然后再轻微反弹缩小到原始大小的效果。平移动画类似,上升后再反弹下沉一定高度。具体变化值详见代码。

3.2 白线延长动画注册文字入场动画播放动画结束后开始白色线条的延长动画。这个动画就是线条在X方向的缩放:
  
[Java] 查看源文件 复制代码
  public static void lineExpendAni(View target, SimpleAnimatorListener endListener)[/font]    {
        target.setVisibility(View.VISIBLE);

        ObjectAnimator animator = ObjectAnimator.ofFloat(target, "ScaleX", 0, 0.6f, 0.9f, 1.0f);
        animator.setDuration(1500);
        animator.setInterpolator(new DecelerateInterpolator());
        target.setPivotX(0);
        animator.start();

        animator.addListener(endListener);
    }
利用setPivotX(0)方法把线条X方向的中心点(可理解为缩放的起始点,动画将以该坐标为中线开始辐射,默认为view的中线点)设置0,这样扩大动画只会向一个方向发生,即可实现线条延长效果。动画播放数值"0, 0.6f, 0.9f, 1.0f"并不是等差排列,还是越来越小,这样即可实现减速效果(根据差值的缩小梯度绝对减速度的变化值)。

3.3 success文字入场动画  
[Java] 查看源文件 复制代码
 public static void successInAni(View success, View signUpView, SimpleAnimatorListener endListener)[/font]    {
        success.setVisibility(View.VISIBLE);

        int durationTime = 1000;

        int width = success.getMeasuredWidth();

        ObjectAnimator successTranslationAni = ObjectAnimator.ofFloat(success, "TranslationX", width * -1.2f, width * -0.2f, 0);
        ObjectAnimator successAlphaAni = ObjectAnimator.ofFloat(success, "Alpha", 0.1f, 1.0f, 1.0f);

        ObjectAnimator signUpTranslationAni = ObjectAnimator.ofFloat(signUpView, "TranslationX",  0, width * 0.75f, width * 1.5f);
        signUpTranslationAni.setInterpolator(new AccelerateInterpolator());
        ObjectAnimator signUpAlphaAni = ObjectAnimator.ofFloat(signUpView, "Alpha", 1.0f, 1.0f, 0.4f, 0.0f);

        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.playTogether(successTranslationAni, successAlphaAni, signUpTranslationAni, signUpAlphaAni);
        animatorSet.setDuration(durationTime);
        animatorSet.start();

        animatorSet.addListener(endListener);
    }
success文字(成功文字)的入场动画包含俩组动画:
  • 成功文字入场
  • 注册文字出场
俩组动画相互对应,即X方向的平移和透明度的增减。动画的播放值代码写得很清楚,这里就不在累赘复述了。
4、主页动画我们可动画播放view设置一个自定义监听事件,当成功文字播放完成后,回调给activity。当动画结束后,跳转到主页面。
主页显示后,播放动画,动画包含俩个动画,先看代码:
[Java] 查看源文件 复制代码
{
        ValueAnimator valueAnimator = ValueAnimator.ofInt(rl_title.getHeight(), DensityUtils.dp2px(this, 50));
        valueAnimator.setInterpolator(new AccelerateInterpolator());

        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener()
        {
            @Override
            public void onAnimationUpdate(ValueAnimator animation)
            {
                rl_title.getLayoutParams().height = (int) animation.getAnimatedValue();
                rl_title.requestLayout();
            }
        });

        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.playTogether(valueAnimator,
                ObjectAnimator.ofFloat(iv_me, "Alpha", 0.1f, 1.0f),
                ObjectAnimator.ofFloat(iv_menu, "Alpha", 0.1f, 1.0f));
        animatorSet.setDuration(1200);
        animatorSet.start();
    }
代码中:我们利用一个ValueAnimator实现tabView(rl_title)的高度收缩动画,rl_title的起始高度铺满整个屏幕,最后高度变为50dp收缩到屏幕顶部,同时俩个按钮 iv_me 、iv_menu透明度加深。
给ValueAnimator通过addUpdateListener设置一个数值变化监听,根据动画计算的当前值通过布局参数动态设置rl_title的高度。

相关源码推荐:

我来说两句
所有评论(68)
林天佐 2016-9-5 16:17:12
好炫啊
回复
yukong 2016-9-5 16:38:15
感谢分享,楼主V5~
回复
孙林 2016-9-5 16:48:55
楼主威武啊,安卓巴士有你更给力!
回复
深思 2016-9-5 16:54:25
感谢分享,安卓巴士有你更精彩:lol
回复
fanfanfanfanfan 2016-9-5 17:04:17
淡定,淡定,淡定……
回复
春城计算机 2016-9-5 17:04:27
感谢分享,安卓巴士有你更精彩:lol
回复
fanfanfanfanfan 2016-9-5 17:05:59
很给力,安卓巴士有你更精彩!
回复
上传代码
查看数:2811 收藏数:34 下载数:60 点赞数:0
状态:已购或VIP 售价:10(原价:10)金钱 下载权限:初级码农 
代码贡献英雄榜
用户名 下载数
联系我们
首页/微信公众账号投稿

帖子代码编辑/版权问题

QQ:435399051,769657487



联系我们
关闭
合作电话:
13802416937
Email:
435399051@qq.com
商务市场合作/投稿
问题反馈及帮助
联系我们

广告投放| 下载客户端|申请友链|手机版|站点统计|安卓巴士 ( 粤ICP备15117877号 )