##仿华为天气动画

最新推荐文章于 2021-05-26 04:35:59 发布
最新推荐文章于 2021-05-26 04:35:59 发布
阅读量653 收藏 2
点赞数 3
分类专栏： android动画 文章标签： 动画 android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weryoung/article/details/78133473
版权

效果图:

这里写图片描述

图中效果分为3个部分:污染轨迹动画,太阳轨迹动画,太阳闪烁动画,下面分析如何实现太阳轨迹动画和太阳闪烁动画.

思路:

1.画出太阳轨迹背景
2.使用动画描绘太阳运动轨迹
3.根据太阳运动轨迹运动的角度得到太阳圆心的坐标并画出太阳(三角函数)
4.画出太阳闪烁的动画(三角函数,这里注释里详细注释)

关键代码:

public class WeatherView extends View {

    /**
     * 污染进度
     */
    private int progressPolluton;

    /**
     * 太阳轨迹进度
     */
    private int progressSunPath;

    /**
     * 太阳每条光线闪烁进度
     */
    private int progressSun;

    /**
     * 太阳光线条数
     */
    private int sunshineCount = 10;

    /**
     * 每个模块的上下间距
     */
    private float marginVertical = ScreenUtils.dp2Px(20);

    /**
     * 污染指数圆半径
     */
    private float radiusPollution = dp2Px(70);

    /**
     * 太阳半径
     */
    private float radiusSun = dp2Px(10);

    /**
     * 太阳轨迹半径
     */
    private float radiusSunPath = dp2Px(140);

    /**
     * 画笔
     */
    private Paint paint = new Paint();

    private RectF rectF = new RectF();


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

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

    public WeatherView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        pollutionAnimation();
        sunPathAnimation();
        sunShineAnimation();
    }

    private void pollutionAnimation() {//污染指数
        ValueAnimator animator1 = ValueAnimator.ofInt(400).setDuration(2000);
        animator1.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                progressPolluton = (int) animation.getAnimatedValue();
                invalidate();
            }
        });
        animator1.start();
    }

    private void sunPathAnimation() {//太阳轨迹
        ValueAnimator animator2 = ValueAnimator.ofInt(0, 180).setDuration(3000);
        animator2.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                progressSunPath = (int) animation.getAnimatedValue();
                invalidate();
            }
        });
        animator2.start();
    }

    private void sunShineAnimation() {//太阳
        ValueAnimator animator3 = ValueAnimator.ofInt(0, 24).setDuration(2000);
        animator3.setInterpolator(new LinearInterpolator());
        animator3.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                progressSun = (int) animation.getAnimatedValue();
                invalidate();
            }
        });
        animator3.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                sunShineAnimation();
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        animator3.start();
    }


    @Override
    protected void onDraw(Canvas canvas) {
        int widthCenter = getWidth() / 2;
        drawPullotionIndex(canvas, widthCenter);
        drawSunPath(canvas, widthCenter);
        drawSun(canvas, widthCenter);
    }

    private void drawPullotionIndex(Canvas canvas, int widthCenter) {
        paint.reset();
        paint.setAntiAlias(true);
        paint.setColor(Color.parseColor("#888888"));
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(ScreenUtils.dp2Px(5));
        paint.setStrokeCap(Paint.Cap.ROUND);
        rectF.set(widthCenter - radiusPollution, marginVertical, widthCenter + radiusPollution, marginVertical + radiusPollution * 2);
        canvas.drawArc(rectF, 150, 240, false, paint);//画出污染指数背景

        paint.reset();
        paint.setAntiAlias(true);
        paint.setColor(Color.parseColor("#E91E63"));
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(ScreenUtils.dp2Px(5));
        paint.setStrokeCap(Paint.Cap.ROUND);
        if (progressPolluton != 0) {
            canvas.drawArc(rectF, 150, progressPolluton * (240f / 500), false, paint);
        }

        paint.reset();
        paint.setAntiAlias(true);
        paint.setTextSize(ScreenUtils.sp2Px(12));
        paint.setTextAlign(Paint.Align.CENTER);
        canvas.drawText("重度污染", widthCenter, marginVertical + radiusPollution, paint);

        paint.setTextSize(ScreenUtils.sp2Px(14));
        canvas.drawText(String.valueOf(progressPolluton), widthCenter, marginVertical + radiusPollution + paint.getFontSpacing(), paint);

        int leftPollutionX = (int) (widthCenter + radiusPollution * Math.cos(150 * Math.PI / 180));//污染起始值横坐标
        int leftPollutionY = (int) (marginVertical + radiusPollution + radiusPollution * Math.sin(150 * Math.PI / 180));//污染起始值纵坐标
        canvas.drawText("0", leftPollutionX, leftPollutionY + ScreenUtils.dp2Px(16), paint);

        int rightPollutionX = (int) (widthCenter + radiusPollution * Math.cos(30 * Math.PI / 180));//污染最大值横坐标
        int rightPollutionY = (int) (marginVertical + radiusPollution + radiusPollution * Math.sin(30 * Math.PI / 180));//污染最大值纵坐标
        canvas.drawText("500", rightPollutionX, rightPollutionY + ScreenUtils.dp2Px(16), paint);
    }

    private void drawSunPath(Canvas canvas, int widthCenter) {
        PathEffect pathEffect = new DashPathEffect(new float[]{10, 10}, 10);
        paint.reset();
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.STROKE);
        paint.setColor(Color.parseColor("#888888"));
        paint.setPathEffect(pathEffect);
        rectF.set(widthCenter - radiusSunPath, marginVertical + 2 * radiusPollution + 100, widthCenter + radiusSunPath, marginVertical + 2 * radiusPollution + 100 + 2 * radiusSunPath);
        canvas.drawArc(rectF, 180, 180, false, paint);

        paint.reset();
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.STROKE);
        paint.setColor(Color.parseColor("#E91E63"));
        paint.setPathEffect(pathEffect);
        canvas.drawArc(rectF, 180, progressSunPath, false, paint);

        paint.reset();
        paint.setAntiAlias(true);
        canvas.drawLine(0, marginVertical + 2 * radiusPollution + 100 + radiusSunPath, getWidth(), marginVertical + 2 * radiusPollution + 100 + radiusSunPath, paint);

        paint.setTextSize(ScreenUtils.dp2Px(14));
        paint.setTextAlign(Paint.Align.CENTER);
        canvas.drawText("5:30", widthCenter - radiusSunPath, marginVertical + 2 * radiusPollution + 100 + radiusSunPath + ScreenUtils.dp2Px(16), paint);
        canvas.drawText("18:30", widthCenter + radiusSunPath, marginVertical + 2 * radiusPollution + 100 + radiusSunPath + ScreenUtils.dp2Px(16), paint);
    }

    private void drawSun(Canvas canvas, int widthCenter) {
        paint.reset();
        paint.setAntiAlias(true);
        paint.setColor(Color.parseColor("#FFA82C"));

        float cX = (float) (widthCenter + radiusSunPath * Math.cos((progressSunPath + 180) * Math.PI / 180));
        float cY = (float) (marginVertical + 2 * radiusPollution + 100 + radiusSunPath + radiusSunPath * Math.sin((progressSunPath + 180) * Math.PI / 180));
        canvas.drawCircle(cX, cY, radiusSun, paint);
        int perAngle = 360 / sunshineCount;
        paint.setStrokeWidth(4);
        //绘制太阳光线需要知道线的起始和结束坐标,通过太阳轨迹运动轨迹可以得到太阳的圆心坐标,再以该圆心坐标
        //找到两个不同半径的圆(当然,并不用画出这两个圆,我们只是需要它们上面的点用来画光线)
        for (int i = 0; i < sunshineCount; i++) {//画太阳光芒
            int angle = perAngle * i;
            int inX = (int) (cX + (radiusSun + 5) * Math.cos(angle * Math.PI / 180));//光线起始x坐标
            int inY = (int) (cY + (radiusSun + 5) * Math.sin(angle * Math.PI / 180));//光线起始y坐标
            int outX = (int) (cX + (radiusSun + progressSun) * Math.cos(angle * Math.PI / 180));//光线结束x坐标
            int outY = (int) (cY + (radiusSun + progressSun) * Math.sin(angle * Math.PI / 180));//光线结束y坐标
            canvas.drawLine(inX, inY, outX, outY, paint);
        }
    }

    public void startAnimation() {
        pollutionAnimation();
        sunPathAnimation();
    }
仿华为天气预报UI
WangShuo的专栏
02-25 5870
近来公司事前较少，再来找几个有意思的View练练手，下面是原生华为天气预报界面： 下面是仿的UI交互效果：**思路： 1.平移画布到View中心，先绘制一个圆弧，绘制中间文字 2.旋转画布，绘制小短线，同时绘制中间的温度和下边的图片 3.确定0摄氏度的位置，确定每日温差之间共覆盖多少角度 4.算出最小温度的起始角，根据cos
高仿小米天气 日出日落控件
08-23
仿制效果达95%！ 只要设置日出和日落时间加当前时间就能使用！ 解压请阅读README文件！ 文章链接：https://blog.csdn.net/qq_37323489/article/details/81941295
Android仿华为天气绘制刻度盘
weixin_34310785的博客
08-02 125
效果图 可以看到这个自定义控件结合了颜色渐变、动态绘制刻度、动态水球效果。接下来我们就来看看这个效果是如何一步一步实现的。 开始自定义控件 和很多自定义控件方式一样需要去基础某种View或者某种ViewGroup 我这里选择的是View，如下所示： publicclassHuaWeiViewextendsView{ /...
仿华为天气刻度圆盘
08-01 1552
声明：本文参考[http://m.blog.csdn.net/article/details?id=51111125](http://m.blog.csdn.net/article/details?id=51111125)的绘制，但是加入了更多的逻辑判断， 这里感谢作者。下面看最终效果....
android动画特效，简单天气特效
01-23
android动画特效，简单天气特效、天气预报
使用AndroidStudio开发的天气预报APP源代码，仿华为原生天气app，安卓大作业
最新发布
08-16
包括各种视图元素（如TextView、ImageView、RecyclerView等），以及布局管理器（如LinearLayout、RelativeLayout、ConstraintLayout）来组织这些元素，以实现仿华为天气APP的界面布局。 3. **Material Design**：...
仿华为天气APP动画效果的Android自定义控件
- 描述中提到了“仿照华为天气APP的动效”，这说明了该应用是基于Android平台进行开发的。Android是目前最流行的移动操作系统之一，广泛用于智能手机和平板电脑等设备。 - Android平台允许开发者使用Java或Kotlin...
仿htc天气时钟
04-07
【标题】"仿htc天气时钟"是一个针对Android平台设计的应用程序，旨在模仿HTC手机上...总的来说，"仿htc天气时钟"是一个融合了天气查询、时钟展示和动画效果的Android应用，其开发涉及到了Android平台的多个核心技术点。
仿华为日落动画实现技术解析与安卓效果展示
仿华为天气预报动画指的是模仿华为天气预报应用中的动画效果。华为的天气应用以其精致的UI设计和流畅的动画效果著称，特别是日落和日出动画。SunAnimation项目便是为了在安卓平台上实现类似的动画效果。 ### 知识点...
安卓动画效果相关-高仿墨迹天气背景动画架构晴天.rar
07-29
高仿墨迹天气背景动画架构，晴天.rar,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习。
Android 天气效果
09-06
下雨，下雪，刮风的天气效果，动画效果,源代码在里面，可以随意的改成自己想要的需求，网上找图片，可以同样修改成自己希望的效果
原创android动态背景天气源码
06-07
这个实例是我在项目中抽取的一部分，开发当时耗费了好大的精力，现在把原码分享给大家。 主要实现动态背景天气，比如下雨，闪电，多云等 天气加上会动的背景，马上提高了一个档次，令人眼前一亮。 实现过程都在代码里了，android2.2 祝大家快乐！
仿小米天气预报appADT ECLIPSE
08-31
仿小米天气预报appADT ECLIPSE
android 华为自带天气时钟
01-10
android 华为自带天气时钟
Android 编程之天气预报小实例源码演示及效果展示--2
Engineer-Jsp的专栏
10-27 7002
上一篇博客我们把权限和欢迎动画讲了一下，接下来给大家讲服务和主活动的使用，在上一篇中我们介绍到了服务和活动，在 启动服务之后，服务会将网络请求到的天气信息以广播的形式发送至活动，而活动只需要接收广播就OK了，之后将得到的数据 赋给对应的容器组件就OK了 下面我们先来看看服务的代码 (extends IntentService implements LocationListener)： pa
android动态天气背景卡片,『Flutter-插件篇』实现一款超酷的动态天气背景插件
weixin_36453829的博客
05-26 945
前言前不久，利用周末时间学习并完成一个简单的 Flutter 项目 - 简悦天气，简约不简单，丰富不复杂，这是一款简约风格的 flutter 天气项目，提供实时、多日、24 小时、台风路径、语音播报以及生活指数等服务，支持定位、删除、搜索等操作。下图为主页效果，点击下载 进行体验：home之前发了三篇文章：对天气背景动画的具体实现做了详情的分析和总结，很多小伙伴私信我，希望可以出一个天气动态背景...
实现一个仿华为天气的进度圆
Void_J的博客
01-04 1209
第一次自己动手写东西，觉得写一遍能加深自己的理解，记忆，这个控件是基于别人的基础上改动的 ，原文连接 在这里！ 第一次弄，不会效果图，大概就是一个刻度盘 先说思路：每一个刻度是一条线条，根据圆心和半径来确定每条线的x,y终点坐标,以及根据圆心和(半径-短线长度)来确定每条线的x,y起点坐标，然后起点到终点画线就可以了。按圆弧的坐标画一百条线条表示刻度盘地盘 再换一个颜色的画笔画上进度
仿QQ天气预报UI
WangShuo的专栏
02-25 1515
效果图如下： 图片有些拉伸，可换一套适合的图片，或者计算坐标把图片限定在一个box内，这里我就不处理了。使用模拟天气数据public static final String wees[]={"今天","星期二","星期三","星期四","星期五"}; public static final String dayWeather[]={"晴天","小雨","小雨","中雨","小雨"};
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值