『Flutter-绘制篇』实现炫酷的雨雪特效,15分钟的字节跳动视频面试

本文介绍了如何在Flutter中实现炫酷的雨雪动画效果,作为移动开发背景层的一部分。通过创建自定义绘图类`RainSnowPainter`,构造并初始化雨雪参数,实现动画效果。详细讲解了动画的创建和绘制过程,适用于简单的绘制动画逻辑。
摘要由CSDN通过智能技术生成

下图为主页效果:

开始

项目中很多自定义 widget,今天的主角是 背景层,不同的天气气象有不一样的呈现效果,一共实现了 12 种类别,其中有 晴、多云、阴天、小中大雨、小中大雪、雾、霾、浮尘,而背景层又分为三层:

  • 背景颜色层。从上到下的渐变效果
  • 云层。只有一种图片,对其位移、数量、染色做不同变化达到不同效果
  • 雨雪层。为雨雪天气单独做了动画,很炫酷。

好,真正的主角就是这个雨雪层,为了更好的预览效果,在关于页面有上角添加切换天气类型的入口,实时查看不同气象下不同的背景效果。如下图,为雨雪的最终效果(gif 效果看起来会失真,请下载 apk 自行体验):


不得不说,如此复杂的动画(复杂并不是指多难实现,而是不停的绘制很多图片下),Flutter 还能有不错的性能表现,媲美原生效果。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值