Android 星体动效实现

最新推荐文章于 2024-08-07 02:13:55 发布
最新推荐文章于 2024-08-07 02:13:55 发布
阅读量1.6k 收藏 3
点赞数
分类专栏： android 文章标签： android viewpager 动效 星体
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaomu123456/article/details/53203820
版权
的基础上，进行了部分优化，源码在http://download.csdn.net/detail/xiaomu123456/9685975，主要看StarActivity就行了
实际效果如下：


首先，要实现这样一幅动效图，基本上就是两个步骤：
  第一，在背景上确定物体(图片中的星体，流星)的初始位置
  第二，使物体进行移动，在此过程中要实时更新物体的参数信息，比如大小，亮度等

其次，对于图中的每一个实体对象，都需要以下基本信息
   1.方向2.速度3.形态4.大小5.位置6.物体宽度，高度7透明度等

具体定义如下：
public class StarInfo {

    //方向
    public final static int LEFT = 0;
    public final static int RIGHT = 1;
    public final static int TOP = 2;
    public final static int BOTTOM = 3;
    public static final int RIGHT_BOTTOM = 4;

    //速度，实际上相当于在背景上移动的距离(像素)
    public static final int LOW_SPEED = 1;
    public static final int MID_SPEED = 2;
    public static final int HIGTH_SPEED = 3;

    public Bitmap mBitmap;//形态
    public int mWidth;//物体宽度
    public int mHeight;//物体高度
    public Rect mSrcRect;//自身所占的矩形区域

    // 大小
    float sizePercent;
    // x位置
    int xLocation;
    // y位置
    int yLocation;
    // 透明度
    float alpha;
    // 漂浮方向
    int direction;
    // 漂浮速度
    int speed;
}

在图中第一种对象为星体，定义如下：

public class CircleStar extends StarInfo {

    public static final int STAR_TYPE_1 = 101;
    public static final int STAR_TYPE_2 = 102;
    public static final int STAR_TYPE_3 = 103;

    private Context mContext;

    public CircleStar(Context context,int type){
        this.mContext = context;
        initBitmap(type);
    }

    public void initBitmap( int type ){
        switch (type){
            case STAR_TYPE_1:
                mBitmap = ((BitmapDrawable) mContext.getResources().getDrawable(R.drawable.small_start1))
                        .getBitmap();
                break;
            case STAR_TYPE_2:
                mBitmap = ((BitmapDrawable) mContext.getResources().getDrawable(R.drawable.small_star2))
                        .getBitmap();
                break;
            case STAR_TYPE_3:
                mBitmap = ((BitmapDrawable) mContext.getResources().getDrawable(R.drawable.small_star2))
                        .getBitmap();
                break;
            default:
                mBitmap = ((BitmapDrawable) mContext.getResources().getDrawable(R.drawable.small_start1))
                        .getBitmap();
                break;
        }
        mWidth = mBitmap.getWidth();
        mHeight = mBitmap.getHeight();
        mSrcRect = new Rect(0,0, mWidth, mHeight);
    }

}

在图中第二种对象为流星，定义如下：

public class FallingStar extends StarInfo {

    private Context mContext;

    public FallingStar(Context context){
        this.mContext = context;
        initBitmap();
    }

    public void initBitmap(){
        mBitmap = ((BitmapDrawable) mContext.getResources().getDrawable(R.drawable.light_star_1))
                .getBitmap();
        mWidth = mBitmap.getWidth();
        mHeight = mBitmap.getHeight();
        mSrcRect = new Rect(0,0, mWidth, mHeight);
    }
}
最后在view中展示动画效果：

public class StarView extends View {

    private final static int mStarCount = 200;//背景图添加了200个实体对象
    private List<StarInfo> mStarInfos = new ArrayList();
    private Bitmap mBackgoundBitmap;//背景图片
    private int mBackgoundWidth;
    private int mBackgoundHeight;
    private int mTotalWidth,mTotalHeight;//实际上是背景宽度和高度
    private Paint mPaint;

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

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

    public StarView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initData();
        initStarInfo();
    }

    private void initData() {
        //背景
        mBackgoundBitmap = ((BitmapDrawable) getResources().getDrawable(R.drawable.bg_star))
                .getBitmap();
        mBackgoundWidth = mBackgoundBitmap.getWidth();
        mBackgoundHeight = mBackgoundBitmap.getHeight();
        mTotalWidth = mBackgoundWidth;
        mTotalHeight = mBackgoundHeight;
        this.setBackgroundResource(R.drawable.bg_star);

        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setFilterBitmap(true);
        mPaint.setDither(true);
    }

    /**
     * 获取星球大小
     */
    private float getStarSize(float start, float end) {
        float nextFloat = (float) Math.random();
        if (start < nextFloat && nextFloat < end) {
            return nextFloat;
        } else {
            // 如果不处于想要的数据段，则再随机一次，因为不断递归有风险
            return (float) Math.random();
        }
    }

    /**
     * 初始化星球信息
     */
    private void initStarInfo() {

        StarInfo starInfo = null;
        for (int i = 0; i < mStarCount; i++) {

            if( i % 2 == 0 ){
                starInfo = new CircleStar(getContext(),CircleStar.STAR_TYPE_1);//星体1
            }else if(i % 3 == 0){
                starInfo = new CircleStar(getContext(),CircleStar.STAR_TYPE_2);//星体2
            }else{
                starInfo = new FallingStar(getContext());//流星
            }

            //共有属性
            starInfo.sizePercent = getStarSize(0.1f, 0.2f);
            getStarSpeed(starInfo);
            starInfo.alpha = getStarSize(0.3f, 0.5f);
            starInfo.xLocation = (int) (getStarSize(0f,1f) * mTotalWidth);
            starInfo.yLocation = (int) (getStarSize(0f,1f) * mTotalHeight);

            if( starInfo instanceof FallingStar ){
                starInfo.direction = StarInfo.RIGHT_BOTTOM;
            }else {
                starInfo.direction = getStarDirection();
            }
            mStarInfos.add(starInfo);
        }
    }

    /**
     *在画布上画出star
     */
    private void drawStarDynamic(StarInfo starInfo, Canvas canvas, Paint paint) {
        int xLocation = (int) ( starInfo.xLocation / starInfo.sizePercent);
        int yLocation = (int) ( starInfo.yLocation / starInfo.sizePercent);

        Bitmap bitmap = starInfo.mBitmap;
        Rect srcRect = starInfo.mSrcRect;
        Rect destRect = new Rect();
        destRect.set(xLocation, yLocation, xLocation + starInfo.mWidth, yLocation + starInfo.mHeight);

        paint.setAlpha((int) (starInfo.alpha * 255));
        canvas.save();
        canvas.scale(starInfo.sizePercent, starInfo.sizePercent);
        canvas.drawBitmap(bitmap, srcRect, destRect, paint);
        canvas.restore();

    }

    /**
     *改变star的参数信息(比如速度，透明度，大小等)，在画布上移动star
     */
    private void resetStarFloat(StarInfo starInfo) {
        switch (starInfo.direction) {
            case StarInfo.LEFT:
                starInfo.xLocation -= starInfo.speed;
                if( starInfo.xLocation <= 0 ){
                    starInfo.direction = StarInfo.RIGHT;
                }
                break;
            case StarInfo.RIGHT:
                starInfo.xLocation += starInfo.speed;
                if( starInfo.xLocation >= mTotalWidth ){
                    starInfo.direction = StarInfo.LEFT;
                }
                break;
            case StarInfo.TOP:
                starInfo.yLocation -= starInfo.speed;
                if( starInfo.yLocation <= 0 ){
                    starInfo.direction = StarInfo.BOTTOM;
                }
                break;
            case StarInfo.BOTTOM:
                starInfo.yLocation += starInfo.speed;
                if( starInfo.yLocation >= mTotalHeight ){
                    starInfo.direction = StarInfo.TOP;
                }
                break;
            case StarInfo.RIGHT_BOTTOM:
                starInfo.xLocation += starInfo.speed;
                starInfo.yLocation += starInfo.speed;
                starInfo.alpha += 0.003;
                starInfo.sizePercent += 0.003;
                if( starInfo.xLocation  >= mTotalWidth ){
                    starInfo.xLocation = 0;
                    starInfo.sizePercent = 0.1f;
                    starInfo.alpha = getStarSize(0.0f,0.3f);
                }else if( starInfo.yLocation >= mTotalHeight ){
                    starInfo.yLocation = 0;
                    starInfo.sizePercent = 0.1f;
                    starInfo.alpha = getStarSize(0.0f,0.3f);
                }
                if( starInfo.alpha >= 1.0 ){
                    starInfo.alpha = 1;
                }
                if( starInfo.sizePercent >= 0.6 ){
                    starInfo.sizePercent = 0.6f;
                }

                break;
            default:
                break;
        }
    }

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

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        for (int i = 0; i < mStarInfos.size(); i++) {
            drawStarDynamic(mStarInfos.get(i), canvas, mPaint);
            resetStarFloat(mStarInfos.get(i));
        }
        postInvalidate();
    }

    /**
     * 初始化漂浮速度
     */
    private int getStarSpeed(StarInfo starInfo){
        Random random = new Random();
        int randomSpeed = random.nextInt(3);
        switch (randomSpeed) {
            case 0:
                starInfo.speed = StarInfo.LOW_SPEED;
                break;
            case 1:
                starInfo.speed = StarInfo.MID_SPEED;
                break;
            case 2:
                starInfo.speed = StarInfo.HIGTH_SPEED;
                break;
            default:
                starInfo.speed = StarInfo.MID_SPEED;
                break;
        }
        return starInfo.speed;
    }

    /**
     * 初始化星球运行方向
     */
    public int getStarDirection() {
        Random random = new Random();
        int randomInt = random.nextInt(4);
        int direction = 0;
        switch (randomInt) {
            case 0:
                direction = StarInfo.LEFT;
                break;
            case 1:
                direction = StarInfo.RIGHT;
                break;
            case 2:
                direction = StarInfo.TOP;
                break;
            case 3:
                direction = StarInfo.BOTTOM;
                break;

            default:
                break;
        }
        return direction;
    }

}


j-floret
关注
专栏目录
Android流星效果
06-11
Android流星效果
Android 仿soul首页星球旋转，可上下左右方向旋转
weixin_43117800的博客
01-18 2713
// 3d星球视图旋转样式 implementation 'com.moxun:tagcloudlib:1.2.0' adapter继承TagsAdapter package com.demo.cn; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widg...
Android 七夕表白 星空背景、心形动画
最新发布
weixin_36031304的博客
08-07 32
为了在Android应用中实现七夕表白的星空背景和心形动画效果，你可以使用原生的Android开发方式。这里提供一个简单的实现思路和技术方案。 技术选型开发语言: Kotlin 或 Java UI框架: Android XML Layouts 动画: Android Animation API 功能设计星空背景: 使用静态...
Android自定义View高级动效之---安卓流星雨动效|Android流星雨专辑封面
qq_38237224的博客
10-03 986
篇章目标要点 最近看到酷我音乐App出了一则《穹顶流星》动效，看完之后决定自己尝试一下实现，本文将围绕通过自定义View实现流星雨效果，可以看到流星雨环绕专辑图的高级动效。通过完成这项开发，能够更深的理解自定义View。 实现效果 先上图看下效果，中间设置的是外部传入的图片，四周是通过自定义View实现的流星效果 核心设计思路 1.裁剪ImageView原图获得圆形图片 这部分的基本思路是先将原图缩放至与目标大小合适的尺寸，然后进行裁剪。 其关键步骤是需要设置相交取背景，这部分有较多人员以及整理了相关资
android立体3D效果_Android实现八大行星绕太阳3D旋转效果
weixin_39890431的博客
10-23 511
code小生 一个专注大前端领域的技术平台公众号回复Android加入安卓技术群作者：史蒂芬诺夫斯基链接：https://www.jianshu.com/p/2954f2ef8ea5声明：本文已获史蒂芬诺夫斯基授权发表，转发等请联系原作者授权好久没写View了，最近恰巧遇到一个八大行星绕太阳旋转的假3D效果，写完之后感觉效果还不错。能玩十分钟的那种。本篇将一步步带您实现这样的一个效果，p...
Android Opengl ES2.0 -实现小行星显示效果并可触摸控制
NoMmmMoN的博客
04-30 1519
本示例是通过sharder实现的平面小行星效果。带触摸控制旋转，其中触摸控制旋转使用旋转矩阵的方式计算。小行星的sharder是从国外某论坛找到的，没有深入研究实现方式。附旋转矩阵计算公式：double alaph_x = x * PI / 180; double theta_y = y * PI / 180; double phi_z = z * PI / 180; double Sx =
Android星体动效实现
11-17
在Android开发中，实现引人入胜的动画效果可以极大地提升用户体验，特别是在设计与天文相关的应用时，"星体动效"能为用户营造出独特的视觉感受。本篇将深入探讨如何在Android平台上实现这样的动效，以创建一个令人...
Android酷炫动画效果之3D星体旋转效果
08-27
Android 3D星体旋转效果实现详解 本文要实现的3D星体旋转效果是从CoverFlow演绎而来，不过CoverFlow只是对图像进行转动，我这里要实现的效果是要对所有的View进行类似旋转木马的转动。在Android中，如果想要实现3D...
安卓3d旋转效果源代码，仿照安医生效果
11-17
自己写的 嘿嘿 就是给大家借鉴借鉴 嗯 谢谢大家来下载哦，嘿嘿
android行星动画,Android实现SoulApp星球效果
weixin_33015139的博客
05-26 691
SoulApp的星球看起来太炫酷了！！！啥也不说先上图：soul planet.gif基础知识首先得拿出我们的数学知识：球坐标系(r,θ,φ)与直角坐标系(x,y,z)的转换关系:x = rsinθcosφ.y = rsinθsinφ.z = rcosθ.Q：What！为什么要整个球坐标系啊？A：因为星球嘛，位置信息当然球坐标系更加简单额。实现思路核心算法来自：3dTagCloudAndroid在...
Android实现八大行星绕太阳3D旋转效果
金戈鐡馬
03-01 828
效果图:本文目的:巩固/练习 自定义View分析解决问题的思路需要解决的问题:1、行星的整体布局，3D的视觉效果2、行星转到太阳后面时，会被太阳挡住，转到太阳前面时，会挡住太阳3、行星自动旋转，并且可以根据手势滑动，滑动完之后继续自动旋转4、中间的太阳有照射的旋转动画分析问题:1、行星的整体布局，3D的视觉效果如果我们draw()的之前通过Camera将Canvas绕x轴旋转60°是不是就可以搞定？这种方式实则是不可行的。
android 流星动画,android动画Rotate
weixin_33883104的博客
05-25 227
项目有一个需求，有一个刷新按钮，上面放着一个常见的静止的刷新圆圈，如下图： 一旦用户按了刷新按钮，需要让这个刷新圆圈转动起来，让用户感觉到程序还在运行着，而不是卡死了。有两个思路，一是将这个图按照旋转时间不同旋转成不同旋转角度的图片，就像要做一张gif图片一样，例如我要每次旋转30度，就需要360\30=12张图片，然后再anim文件夹下新建xml文件，内容如下：Xml代码 and...
Android 流星雨，红包雨，大爆炸，瀑布飞花以及涟漪等炫酷效果
李建国的博客
11-27 4137
Leonids是一个与标准Android UI配合使用的粒子系统库。该库非常轻巧，LeonidsLib.jar只有81Kb。 首先声明一点：因为我也是刚了解ParticleSystem，因为我只是需要用里面的效果，说的不对的地方大家可以指出来。 我了解的效果有红包雨，流星雨，大爆炸，瀑布飞花以及涟漪这几张效果，其实还可以做很多的效果，需要自己去研究亲自试一试就明白了。 老规矩先看图： 流星...
Android 流星效果的实现
u010192548的博客
06-11 4740
大晚上实在无聊，看着天空突然流星划过，心想，是不是也能在App上做出一个这个效果来 ，其实2年前当时用最简单的JavaScript实现过流星效果，于是乎今天也试着写了下，当时心想，网络上应该有相似的Demo，结果我并没有找到，真是一些下雪的例子，我下载过来看了一下，就是刷新View的操作，个人感觉这样做不妥，于是考虑使用SurfaceView实现      SurfaceView的使用我就不介绍
Android流星雨效果---史上最炫，浪漫，值得陪你女朋友一起看~ [捂脸]
houdada_的博客
02-06 2758
上一篇 Android雪花特效 - 自定义View 看效果
安卓动画壁纸实战：制作一个星空动态壁纸（带随机流星动画）
sinat_17133389的博客
05-26 2149
通过上面的代码可以看到，其实安卓的动态壁纸并没有想象中的那么困难，无非就是自定义绘制这一套，如果熟悉自定义绘制的话，写起来还是非常容易的。不过我们这里只展示了使用 Canvas 的绘制，事实上，由 SurfaceHolder 我们可以有更多的"骚操作"，例如调用第三方成熟的动画库直接刷新 Surface 等，感兴趣的可以去搜一搜。
Android实现SoulApp星球效果
u012582497的博客
05-20 8031
SoulApp的星球看起来太炫酷了！！！ 啥也不说先上图： Github传送门 biu biu biu ~~~ 基础知识 首先得拿出我们的数学知识： 球坐标系(r,θ,φ)与直角坐标系(x,y,z)的转换关系: x = rsinθcosφ. y = rsinθsinφ. z = rcosθ. Q：What！为什么要整个球坐标系啊？ A：因为星球嘛，位置信息当然球坐标系更加简单额。 实现...
Android实现炫酷的星空变幻效果
weixin_33805992的博客
09-29 832
二话不说，先上效果图： 这个图是什么意思呢，有没有看到一直在变颜色啊，有没有很像星云变幻呢，有没有很炫，快来看看怎么实现的吧！ 这是我们要被处理的原图，实现方式就是通过不断的改变这张图的色相从而达到效果： 贴布局文件： <?xml version="1.0" encoding="utf-8"?> <LinearLayout ...
"Android实现酷炫3D星体旋转动画效果
总之，本文通过介绍Android中实现酷炫的3D星体旋转效果的方法，帮助读者了解了如何通过Camera和属性动画来实现这一效果，同时也对如何使用数学计算来实现更加复杂的动画效果进行了介绍。通过学习本文，读者将能够...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值