高仿UC浏览器指导欢迎页面(NineOldAndroid实现)

最新推荐文章于 2019-07-29 11:31:20 发布

AK浅蓝

最新推荐文章于 2019-07-29 11:31:20 发布

阅读量2.2k

点赞数

文章标签： uc android nineold 高仿引导动画

本文链接：https://blog.csdn.net/xiaoxi_qianlan/article/details/46057867

版权

前几天研究了下小米的卸载动画(上一篇博客)，但是太丑了。今天升级了UC到10.4.2觉得指导页面还是很文艺的，用上次自己的接口大概实现了下（真心比小米的好模仿啊）
先上几张效果图
这里写图片描述
为了能更好的理解，我把每个动画都拆分了出来单个写，没有集成到一起批处理，个人觉得还是很容易理解的。
demo的Git地址
https://github.com/qtstsq55/SimilarUCBrowserWizardGuideAnimator
页面很简单只有一个Activity
package com.example.ucwizard;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView;

import com.example.animator.AnimationFactory;
import com.example.animator.AnimatorValue;
import com.example.animator.AnimatorValueImplements;
import com.nineoldandroids.animation.Animator;

public class MainActivity extends Activity {

private ImageView im_guide;
private ImageView im_guide_text;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    initViews();
    startAnimation();
}

private void initViews(){
    im_guide= (ImageView) findViewById(R.id.im_guide);
    im_guide_text= (ImageView) findViewById(R.id.im_guide_text);
}

private void startAnimation(){
//第一张图片缩小动画
    AnimatorValue a3=new AnimatorValueImplements(im_guide,"ScaleX",1.5f,1.4f,1.3f,1.2f,1.1f,1f);
    AnimatorValue a4=new AnimatorValueImplements(im_guide,"ScaleY",1.5f,1.4f,1.3f,1.2f,1.1f,1f);
    a3.getAnimator().setDuration(5000);
    a4.getAnimator().setDuration(5000);
//"再不疯狂就老了"缩小，增加透明度动画
    AnimatorValue a5=new AnimatorValueImplements(im_guide_text,"ScaleX",1f,0.9f,0.8f,0.7f,0.6f,0.5f);
    AnimatorValue a6=new AnimatorValueImplements(im_guide_text,"ScaleY",1f,0.9f,0.8f,0.7f,0.6f,0.5f);
    AnimatorValue a7=new AnimatorValueImplements(im_guide_text,"Alpha",0f,0.2f,0.4f,0.5f,0.8f,1f);
//"再不疯狂就老了放大，减少透明度动画
    AnimatorValue a8=new AnimatorValueImplements(im_guide_text,"ScaleX",0.5f,0.6f,0.7f,0.8f,0.9f,1f);
    AnimatorValue a9=new AnimatorValueImplements(im_guide_text,"ScaleY",0.5f,0.6f,0.7f,0.8f,0.9f,1f);
    AnimatorValue a10=new AnimatorValueImplements(im_guide_text,"Alpha",1f,0.8f,0.6f,0.4f,0.2f,0f);
//a5要延迟2500毫秒，即第一张图片缩小一半时它开始
    a5.getAnimator().setStartDelay(2500);
    a5.getAnimator().setDuration(2500);
    a6.getAnimator().setDuration(2500);
    a7.getAnimator().setDuration(2500);
//放大，减少透明度动画要串行执行，在缩小，增加透明度动画之后
//在封装的代码里，a8.before(a7)代表a7执行过后a8执行，如若不设置，则视为同时执行
    a8.before(a7);
    a8.getAnimator().setDuration(2500);
    a9.getAnimator().setDuration(2500);
    a10.getAnimator().setDuration(2500);
    a10.getAnimator().addListener(new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animator) {

        }

        @Override
        public void onAnimationEnd(Animator animator) {
            //第一场动画过后，设置下一场的图片
                im_guide_text.setImageResource(R.drawable.uc_white);
                im_guide.setImageResource(R.drawable.user_guide_pic_1);
        }

        @Override
        public void onAnimationCancel(Animator animator) {

        }

        @Override
        public void onAnimationRepeat(Animator animator) {

        }
    });
//同上面大同小异
    AnimatorValue a11=new AnimatorValueImplements(im_guide,"ScaleX",1f,1.15f,1.2f,1.25f,1.3f,1.35f,1f);
    AnimatorValue a12=new AnimatorValueImplements(im_guide,"ScaleY",1f,1.15f,1.2f,1.25f,1.3f,1.35f,1f);
    a11.before(a10);
    a11.getAnimator().setDuration(5000);
    a12.getAnimator().setDuration(5000);
    a12.getAnimator().addListener(new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animator) {

        }

        @Override
        public void onAnimationEnd(Animator animator) {
            im_guide.setImageResource(R.drawable.user_guide_pic_2);
        }

        @Override
        public void onAnimationCancel(Animator animator) {

        }

        @Override
        public void onAnimationRepeat(Animator animator) {

        }
    });
//这里是一闪而过的白屏，很像CS的闪光弹
    AnimatorValue a13=new AnimatorValueImplements(im_guide_text,"Alpha",0,0.2f,0.4f,0.6f,0.8f,1f,0f);
    a13.getAnimator().setStartDelay(4000);
    a13.getAnimator().setDuration(1200);

    AnimatorValue a14=new AnimatorValueImplements(im_guide,"ScaleX",1f,1.15f,1.2f,1.25f,1.3f,1.35f,1f);
    AnimatorValue a15=new AnimatorValueImplements(im_guide,"ScaleY",1f,1.15f,1.2f,1.25f,1.3f,1.35f,1f);
    a14.before(a13);
    a14.getAnimator().setDuration(5000);
    a15.getAnimator().setDuration(5000);
    a15.getAnimator().addListener(new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animator) {

        }

        @Override
        public void onAnimationEnd(Animator animator) {
            im_guide.setImageResource(R.drawable.user_guide_slogan2);
        }

        @Override
        public void onAnimationCancel(Animator animator) {

        }

        @Override
        public void onAnimationRepeat(Animator animator) {

        }
    });
    AnimatorValue a16=new AnimatorValueImplements(im_guide,"ScaleX",1.5f,1.4f,1.3f,1.2f,1.1f,1f);
    AnimatorValue a17=new AnimatorValueImplements(im_guide,"ScaleY",1.5f,1.4f,1.3f,1.2f,1.1f,1f);
    AnimatorValue a18=new AnimatorValueImplements(im_guide,"Alpha",1f,0.9f,0.8f,0.7f,0.6f,0.5f);
    a16.before(a15);
    a16.getAnimator().setDuration(5000);
    a17.getAnimator().setDuration(5000);
    a18.getAnimator().setDuration(5000);
    a18.getAnimator().addListener(new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animator) {

        }

        @Override
        public void onAnimationEnd(Animator animator) {
            im_guide.setImageResource(R.drawable.user_guide_pic_3);
        }

        @Override
        public void onAnimationCancel(Animator animator) {

        }

        @Override
        public void onAnimationRepeat(Animator animator) {

        }
    });

    AnimatorValue a19=new AnimatorValueImplements(im_guide_text,"Alpha",0,0.2f,0.4f,0.6f,0.8f,1f,0f);
    a19.getAnimator().setStartDelay(4000);
    a19.getAnimator().setDuration(1200);

    AnimatorValue a20=new AnimatorValueImplements(im_guide,"ScaleX",1f,1.15f,1.2f,1.25f,1.3f,1.35f,1f);
    AnimatorValue a21=new AnimatorValueImplements(im_guide,"ScaleY",1f,1.15f,1.2f,1.25f,1.3f,1.35f,1f);
    a20.before(a19);
    a20.getAnimator().setDuration(5000);
    a21.getAnimator().setDuration(5000);
    a21.getAnimator().addListener(new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animator) {

        }

        @Override
        public void onAnimationEnd(Animator animator) {
            im_guide.setImageResource(R.drawable.user_guide_pic_4);
        }

        @Override
        public void onAnimationCancel(Animator animator) {

        }

        @Override
        public void onAnimationRepeat(Animator animator) {

        }
    });


    AnimatorValue a22=new AnimatorValueImplements(im_guide_text,"Alpha",0,0.2f,0.4f,0.6f,0.8f,1f,0f);
    a22.getAnimator().setStartDelay(4000);
    a22.getAnimator().setDuration(1200);

    AnimatorValue a23=new AnimatorValueImplements(im_guide,"ScaleX",1f,1.15f,1.2f,1.25f,1.3f,1.35f,1f);
    AnimatorValue a24=new AnimatorValueImplements(im_guide,"ScaleY",1f,1.15f,1.2f,1.25f,1.3f,1.35f,1f);
    a23.before(a22);
    a23.getAnimator().setDuration(5000);
    a24.getAnimator().setDuration(5000);
    a24.getAnimator().addListener(new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animator) {

        }

        @Override
        public void onAnimationEnd(Animator animator) {
            im_guide.setImageResource(R.drawable.user_guide_pic_all_blur);
        }

        @Override
        public void onAnimationCancel(Animator animator) {

        }

        @Override
        public void onAnimationRepeat(Animator animator) {

        }
    });

    AnimatorValue a25=new AnimatorValueImplements(im_guide_text,"Alpha",0,0.2f,0.4f,0.6f,0.8f,1f,0f);
    a25.getAnimator().setStartDelay(4000);
    a25.getAnimator().setDuration(1200);

    AnimatorValue a26=new AnimatorValueImplements(im_guide,"ScaleX",1.5f,1.4f,1.3f,1.2f,1.1f,1f);
    AnimatorValue a27=new AnimatorValueImplements(im_guide,"ScaleY",1.5f,1.4f,1.3f,1.2f,1.1f,1f);
    a26.before(a25);
    a26.getAnimator().setDuration(5000);
    a27.getAnimator().setDuration(5000);
    AnimatorValue a28=new AnimatorValueImplements(im_guide_text,"ScaleX",1f,0.9f,0.8f,0.7f,0.6f,0.5f);
    AnimatorValue a29=new AnimatorValueImplements(im_guide_text,"ScaleY",1f,0.9f,0.8f,0.7f,0.6f,0.5f);
    AnimatorValue a30=new AnimatorValueImplements(im_guide_text,"Alpha",0f,0.2f,0.4f,0.5f,0.8f,1f);
    a28.getAnimator().addListener(new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animator) {
              im_guide_text.setImageResource(R.drawable.user_guide_slogan3);
        }

        @Override
        public void onAnimationEnd(Animator animator) {

        }

        @Override
        public void onAnimationCancel(Animator animator) {

        }

        @Override
        public void onAnimationRepeat(Animator animator) {

        }
    });
    a28.getAnimator().setStartDelay(2500);
    a28.getAnimator().setDuration(2500);
    a29.getAnimator().setDuration(2500);
    a30.getAnimator().setDuration(2500);
//到这就结束了，一场动画也很长，本来是放在for循环里的，但是不好理解   AnimationFactory.getInstance().createEngine().startTogetherByLink(
            null,a3,a4,a5,a6,a7,
            a8,a9,a10,a11,a12,a13,a14,
            a15,a16,a17,a18,a19,a20,
            a21,a22,a23,a24,a25,a26,a27,
            a28,a29,a30);
}

}

AK浅蓝

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
高仿UC浏览器指导欢迎页面(NineOldAndroid实现)

前几天研究了下小米的卸载动画(上一篇博客)，但是太丑了。今天升级了UC到10.4.2觉得指导页面还是很文艺的，用上次自己的接口大概实现了下（真心比小米的好模仿啊）先上几张效果图为了能更好的理解，我把每个动画都拆分了出来单个写，没有集成到一起批处理，个人觉得还是很容易理解的。 demo的Git地址 https://github.com/qtstsq5
复制链接

扫一扫