android自定义view之星星动画

最新推荐文章于 2021-05-26 08:55:19 发布
置顶 最新推荐文章于 2021-05-26 08:55:19 发布
阅读量971 收藏 2
点赞数
分类专栏： android 自定义view
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010648159/article/details/101430841
版权

先上效果图
在这里插入图片描述
其实上边效果分为几个部分，一个部分是多个小星星四处扩散，第二个部分是一个小星星从小变大，还有一个是实心圆的动画。
代码如下

第一：所有的小星星动画


public class StarView extends View {

    private Paint mPaint;

    private Bitmap mStar;							// 星星图片

    private ArrayList<StarModel> mStarModelList	= null;

    private float					mCurrentProgress;				// 当前进度

    private int						mCenterX, mCenterY;				// 中心点

    private ValueAnimator mValueAnimator;

    public StarView(Context context) {
        this(context, null);
    }

    public StarView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public StarView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        mPaint = new Paint();
        mPaint.setAntiAlias(true);

        mStar = BitmapFactory.decodeResource(getResources(), R.mipmap.stars1);
    }

    @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        mCenterX = getMeasuredWidth() / 2 - mStar.getWidth() / 2; // 90
        mCenterY = getMeasuredHeight() / 2 - mStar.getHeight() / 2; // 90
    }

    @Override protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (mStarModelList == null) {
            return;
        }
        for (StarModel starModel : mStarModelList) {
            starModel.draw(canvas, mPaint, mCurrentProgress, mCenterX, mCenterY);
        }
    }

    public ValueAnimator startAnimation(int length, int duration, int delay) {
        if (mStarModelList != null) {
            mStarModelList.clear();
            mValueAnimator = null;
        }
        initStarModel(length);

        mValueAnimator = ValueAnimator.ofFloat(0f, 1f);
        mValueAnimator.setInterpolator(new DecelerateInterpolator());
        mValueAnimator.setDuration(duration);

        mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

            @Override public void onAnimationUpdate(ValueAnimator animation) {
                mCurrentProgress = (float) animation.getAnimatedValue();
                invalidate();
            }
        });
        mValueAnimator.setStartDelay(delay);
        mValueAnimator.start();
        return mValueAnimator;
    }

    private void initStarModel(int length) {
        mStarModelList = new ArrayList<>(10);
        Random random = new Random();

        for (int i = 0; i < length; i++) {
            float angle = 0f;
            float startX = 0f;
            float startY = 0f;
            float speed = 1 + random.nextInt(5); // 总共是19

            float scale = 1f; // 开始大小

            if (i == 0) {
                angle = (float) ((10 + 270) * Math.PI / 180);
                startX = (float) Math.cos(angle) * mCenterX * 0.05f;
                startY = (float) Math.sin(angle) * mCenterY * 0.5f;
                // speed = 0.5789f;

            } else if (i == 1) {
                angle = (float) ((30 + 270) * Math.PI / 180);
                startX = (float) Math.cos(angle) * mCenterX * 0.1f;
                startY = (float) Math.sin(angle) * mCenterY * 0.2f;
                // speed = 0.7368f;

            } else if (i == 2) {
                angle = (float) ((40 + 270) * Math.PI / 180);
                startX = (float) Math.cos(angle) * mCenterX * 0.25f;
                startY = (float) Math.sin(angle) * mCenterY * 0.4f;
                // speed = 0.5789f;

            } else if (i == 3) {
                angle = (float) ((60 + 270) * Math.PI / 180);
                startX = (float) Math.cos(angle) * mCenterX * 0.3f;
                startY = (float) Math.sin(angle) * mCenterY * 0.33f;
                // speed = 0.5263f;

            } else if (i == 4) { // 星星变小
                angle = (float) ((50) * Math.PI / 180);
                startX = (float) Math.cos(angle) * mCenterX * 0.6f;
                startY = (float) Math.sin(angle) * mCenterY * 0.7f;
                scale = 0.8f;
                // speed = 0.3157f; // 8

            } else if (i == 5) { // 星星变更小
                angle = (float) ((80) * Math.PI / 180);
                startX = (float) Math.cos(angle) * mCenterX * 0.05f;
                startY = (float) Math.sin(angle) * mCenterY * 0.3f;
                scale = 0.6f;
                // speed = 0.4210f;

            } else if (i == 6) {
                angle = (float) ((145) * Math.PI / 180);
                startX = (float) Math.cos(angle) * mCenterX * 0.5f;
                startY = (float) Math.sin(angle) * mCenterY * 0.28f;
                // speed = 0.5263f;

            } else if (i == 7) {
                angle = (float) ((205) * Math.PI / 180);
                startX = (float) Math.cos(angle) * mCenterX * 0.5f;
                startY = (float) Math.sin(angle) * mCenterY * 0.15f;
                scale = 0.8f;
                // speed = 0.4210f;

            } else if (i == 8) {
                angle = (float) ((215) * Math.PI / 180);
                startX = (float) Math.cos(angle) * mCenterX * 0.8f;
                startY = (float) Math.sin(angle) * mCenterY * 0.35f;
                // speed = 0.5789f;

            } else if (i == 9) {
                angle = (float) ((225) * Math.PI / 180);
                startX = (float) Math.cos(angle) * mCenterX * 0.4f;
                startY = (float) Math.sin(angle) * mCenterY * 0.5f;
                // speed = 0.5789f;
            }
            Matrix matrix = new Matrix();
            StarModel model = new StarModel(mStar, angle, startX, startY, matrix, scale, speed);

            mStarModelList.add(model);
        }
    }

}

第二：圆环动画


public class RingView extends View {

    private final static String	TAG			= "RingView";

    private int					mDuration	= 5000;

    private float				mCx;

    private float				mCy;

    private float				mMaxRadius;														// 最大半径

    private float				mOuterCurrentProgress;

    private float				mInnerCurrentProgress;

    private int[]				mColors;

    private PorterDuffXfermode mXfermode	= new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);

    private Paint mPaint;															// 绘制外圆

    private Paint				mInnerPaint;

    public RingView(Context context) {
        this(context, null);
    }

    public RingView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public RingView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        mColors = getContext().getResources().getIntArray(R.array.clor_ring);
        mPaint = new Paint();
        mPaint.setColor(mColors[0]);

        mInnerPaint = new Paint();
        mInnerPaint.setColor(Color.TRANSPARENT);
        mInnerPaint.setAlpha(0);
        mInnerPaint.setXfermode(mXfermode);
    }

    @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        mCx = getMeasuredWidth() / 2;
        mCy = getMeasuredHeight() / 2;

        mMaxRadius = mCx;
    }

    @Override protected void onDraw(Canvas canvas) {
        int saveLayer = canvas.saveLayer(0, 0, mCx * 2, mCy * 2, mPaint, Canvas.ALL_SAVE_FLAG);

        canvas.drawCircle(mCx, mCx, mOuterCurrentProgress * mMaxRadius, mPaint);

        canvas.drawCircle(mCx, mCy, mInnerCurrentProgress * mMaxRadius, mInnerPaint);

        canvas.restoreToCount(saveLayer);
    }

    public void startAnim(int duration) {
        ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 1f);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

            @Override public void onAnimationUpdate(ValueAnimator animation) {
                mOuterCurrentProgress = (float) animation.getAnimatedValue();
                mPaint.setARGB(255, 255, (int) (229 - mOuterCurrentProgress * 68), 0);
                invalidate();
            }
        });
        valueAnimator.setInterpolator(new DecelerateInterpolator()); // 先变快，然后减速

        ValueAnimator innerAnimator = ValueAnimator.ofFloat(0.01f, 1f);
        innerAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

            @Override public void onAnimationUpdate(ValueAnimator animation) {
                mInnerCurrentProgress = (float) animation.getAnimatedValue();
                invalidate();
            }
        });
        innerAnimator.setInterpolator(new AccelerateDecelerateInterpolator());

        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.setDuration(duration);
        animatorSet.playTogether(valueAnimator, innerAnimator);
        animatorSet.start();
    }

    private OnWillEndAnimatorListener onWillEndAnimatorListener;

    public void setOnWillEndAnimatorListener(OnWillEndAnimatorListener onWillEndAnimatorListener) {
        this.onWillEndAnimatorListener = onWillEndAnimatorListener;
    }

    public interface OnWillEndAnimatorListener {

        void onWillEndAnimatorListener(float value);
    }

}

第三结合小星星和圆环


public class StarLayout extends FrameLayout {

    private ImageView idIvBigStar;			// 大星星

    private RingView	idRingView;				// 圆环

    private StarView	idSmallStarListView;	// 所有的小星星

    public StarLayout(@NonNull Context context) {
        this(context, null);
    }

    public StarLayout(@NonNull Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public StarLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        inflate(context, R.layout.layout_star, this);

        idIvBigStar = findViewById(R.id.id_iv_big_star);
        idRingView = findViewById(R.id.id_ringview);
        idSmallStarListView = findViewById(R.id.id_starview);
    }

    public void startRingAnim(final int[] originLocation) {
        final int[] location = new int[2];
        idIvBigStar.post(new Runnable() {

            @Override public void run() {
                idIvBigStar.getLocationInWindow(location);

                final int disX = originLocation[0] - location[0];
                final int disY = originLocation[1] - location[1];

                idIvBigStar.setAlpha(0f);
                idRingView.startAnim(400);
                startBigStarScaleAnim(1200, 0).start();

                idSmallStarListView.startAnimation(10, 1600, 300);
                startBitStarTransAndScaleAnim(disX, disY, 1000, 1100);
            }
        });
    }

    private Animator startBigStarScaleAnim(int duration, int startDelay) {
        ValueAnimator valueAnimator = ValueAnimator.ofFloat(1f, 5f, 8f);

        valueAnimator.setInterpolator(new BounceInterpolator());
        valueAnimator.addListener(new AnimatorListenerAdapter() {

            @Override public void onAnimationStart(Animator animation) {
                idIvBigStar.setAlpha(1f);
            }
        });
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

            @Override public void onAnimationUpdate(ValueAnimator animation) {
                float value = (float) animation.getAnimatedValue();
                idIvBigStar.setScaleX(value);
                idIvBigStar.setScaleY(value);
            }
        });
        valueAnimator.setDuration(duration);
        valueAnimator.setStartDelay(startDelay);
        return valueAnimator;
    }

    /***
     * 平移并且缩放动画
     */
    private void startBitStarTransAndScaleAnim(final int disX, final int disY, int duration, int delay) {
        ValueAnimator scaleAnim = ValueAnimator.ofFloat(8f, 1f);
        scaleAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

            @Override public void onAnimationUpdate(ValueAnimator animation) {
                float value = (float) animation.getAnimatedValue();
                idIvBigStar.setScaleX(value);
                idIvBigStar.setScaleY(value);
            }
        });

        ValueAnimator transAnim = ValueAnimator.ofFloat(0, 1f);
        transAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

            @Override public void onAnimationUpdate(ValueAnimator animation) {
                float value = (float) animation.getAnimatedValue();
                idIvBigStar.setTranslationX(value * disX);
                idIvBigStar.setTranslationY(value * disY);
            }
        });

        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.play(scaleAnim).with(transAnim);
        animatorSet.setDuration(duration);
        animatorSet.setStartDelay(delay);
        animatorSet.addListener(new AnimatorListenerAdapter() {

            @Override public void onAnimationEnd(Animator animation) { // 动画执行完毕
                if (onAnimationEnd != null) {
                    onAnimationEnd.onAnimationEnd();
                }
            }
        });
        animatorSet.start();
    }

    private OnAnimationEnd onAnimationEnd;

    public void setOnAnimationEnd(OnAnimationEnd onAnimationEnd) {
        this.onAnimationEnd = onAnimationEnd;
    }

    public interface OnAnimationEnd {

        void onAnimationEnd();
    }

}

源代码链接

北京流年
关注
专栏目录
Android自定义View最全面试题及参考答案
大模型大数据攻城狮的专栏
08-06 265
为了创建一个完全自定义的进度条，你可以创建一个新的View类并重写onDraw()方法。init();init();init();@Override// 重新绘制视图。
实现闪烁的星星安卓开发demo
09-17
在Android中，通过创建透明度渐变动画（AlphaAnimation）可以实现图片由显示到逐渐隐藏，再逐渐显示的过程。通过这一个动画可以实现闪烁的星星
Android酷炫动画效果之3D星体旋转效果
08-27
本文要实现的3D星体旋转效果是从CoverFlow演绎而来，不过CoverFlow只是对图像进行转动，我这里要实现的效果是要对所有的View进行类似旋转木马的转动
使用属性动画实现星光四射的动画效果
道的博客
12-12 1067
在Android中, 属性动画是非常有意思的功能, 控制参数变换动画效果. 与使用gif图片相比, 动画控件要节约空间和增加响应速度. 要点: (1) 使用PercentLayout设置自定义控件的大小. (2) 属性动画的两个重要函数, 中值和映射. (3) 擦除画笔(PorterDuff.Mode.CLEAR)的使用方法. (4) 使用颜色估值器(ArgbEvaluator)控制颜色
android行星动画,Android实现SoulApp星球效果
weixin_29865183的博客
05-26 772
SoulApp的星球看起来太炫酷了！！！啥也不说先上图：soul planet.gif基础知识首先得拿出我们的数学知识：球坐标系(r,θ,φ)与直角坐标系(x,y,z)的转换关系:x = rsinθcosφ.y = rsinθsinφ.z = rcosθ.Q：What！为什么要整个球坐标系啊？A：因为星球嘛，位置信息当然球坐标系更加简单额。实现思路核心算法来自：3dTagCloudAndroid在...
Android自定义View--RatingStarView：自定义星星评分/打分控件
okg0111的博客
11-23 1393
一、前言 由于最近项目中需要使用到自定义星星评分和打分控件，而且需要支持根据后台返回的数据动态配置满星星和空星星的颜色，虽然Android中也提供了官方的星星评分控件RatingStar，但其效果不能满足UI和产品需求，而且项目中现用的自定义星星评分控件，是基于本地设置满星星和空星星的Drawable图片资源来实现满星星和空星星的显示效果，不能满足动态根据配置的颜色数据来改变满星星和空星星的颜色...
android动画 行星,Android自定义View之星球运动
weixin_42517466的博客
05-25 397
Android自定义View之星球运动欢迎大家访问我的个人博客在dribbble闲逛的时候发现的一个有意思的星球运动的动画,刚好最近时间尚可,就简单实现了一下中间运动的部分,又是因为时间的原因,开头位移的部分没有完成.这是在dribbble中发现的动画这是我自己实现的效果... 总觉得我这个星球有点胖... 因为胖所以转的慢么这是.速度等细节还有优化的余地设计过程老办法,先分解动画的构成.整个...
android 仿花椒直播中星星从底部往上移动
zhouguizhi
08-07 2791
android 仿花椒直播中星星从底部往上移动
android实现满屏小星星不断飘落/天女散花的效果
10-23
android实现满屏小星星不断飘落/天女散花的效果，可根据需要调节数量、速度和大小等等
android自定义view星空,华夏万象 Android 版 widget 库
weixin_42197110的博客
05-25 282
这个库在「华夏万象」Android 版开发过程中产出，仅用做查阅参考、不适合工业使用。目录MarqueeDrawable 跑马灯进度条 drawableStarrySky 星空 drawableChinaMapView 中国地图带手势版本MenuItemView 带底部菜单的ViewParallaxRelativeLayout 纵向的视差滚动布局SegmentProgressBar 分段、可拖动的...
android下写的小球下落的动画
12-28
这个资源是我参照《Android2.0游戏开发实战宝典》中的一个例子写的，但是这个例子有些错误，而且有些地方写的让人不太容易懂，针对这点我加以了改进和注释，希望新手能够更容易的理解android下的动画和游戏开发。以后我还会上传一些资料，希望大家多提宝贵意见，谢谢~~~
安卓动画效果相关-AndroidGlitterView闪烁的星星效果的控件.rar
07-29
AndroidGlitterView闪烁的星星效果的控件.rar,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习。
AndroidAnimation-Android自定义View之星球运动.zip
09-23
Android自定义View 星球运动在dribbble闲逛的时候发现的一个有意思的星球运动的动画,刚好最近时间尚可,就简单实现了一下中间运动的部分,又是因为时间的原因,开头位移的部分没有完成. 这是在dribbble中发现的动画 ...
Android自定义星星评分控件
07-18
1. 重写onDraw()方法：在自定义View中，我们需要覆盖onDraw()方法，使用Canvas来绘制星星。可以使用Path对象来创建星星的形状，然后使用canvas.drawPath()方法进行绘制。 ```java @Override protected void onDraw...
android自定义星星评分控件
06-28
2. **自定义View类**：继承自Android的基础View类，如View或ImageView，并重写其onDraw()方法来绘制星星。在这里，我们需要实现点击星星时改变选中状态的功能。 3. **事件处理**：添加OnClickListener或者...
h5 背景 星星掉落 动画
weixin_45121510的博客
01-20 305
nb-loading文件 <template> <!-- 1. 背景图 --> <div class="nb-loading"> <!-- 2. 滑动流星动画 --> <nbMeteor></nbMeteor> <!-- 3. loading加载百分比动效 --> <div class="nb-loading-process"> <div class="pr.
属性动画之纷繁的星星
悠悠吾心的专栏
08-29 1292
属性动画之纷繁的星星 效果就是你手点哪，就会生成一个星星然后弹射出去 这个效果很酷炫吧，这个是我看了郭神的属性动画后写的，里面将大部分的属性动画都用上了包括Evaluator和Interpolator 不过Interpolator是用的系统的，希望各位大神能自己写，然后还用到个数学公式贝塞尔曲线 整体就是一个RelativeLayout，我为大家剖析下这个动画的实现 如果大家不清
android 星星流逝动画,Android仿开心消消乐大树星星无限循环效果
weixin_30803191的博客
05-26 555
啥都不说先上效果图，这个是我项目里的效果：下面的是我抽取出来的 demo 适配啥的我基本上都做好了没做其他的ok 下面 说一下思路把首先 说一下原理 我是使用bitmap 创建两张图 一开始的时候 一张在下面记为1号 一张在上面 记为2号当手指向下滑动时 判断 1号 的起点位置 是否完全超出屏幕 如果超出屏幕的话 那么将2号变为下面 1号变为上面 (移动1号的Y坐标) 大体思路 是这样. 里面还有...
android 流星动画,超简单的android 流星雨动画 流星动画
weixin_31586247的博客
05-25 372
1、直接看效果 2、布局文件xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:background...
Android自定义View与属性动画打造充电进度条
本文档介绍了如何在Android开发中利用自定义View和属性动画实现充电进度条效果。作者在项目中需要模拟手机电池充电过程中的进度显示，以往的做法是通过图片和定时器来实现。随着对动画技术的学习深入，作者决定使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值