微信小程序 Canvas 动画踩坑——棘手的椭圆
最近正在给我的微信小程序开发一个天气预报的页面,页面的效果如下:
计划页面有两个 canvas,一个用来实时绘制上半部分的天气动画,一个用来绘制中间的气温趋势折线图。
上半部分天气动画在不同的天气下有不同的效果,比如不同强度的降雨会有相应的雨滴从上面落下,阴天多云的时候顶部会有云朵在漂浮,多云转晴的话后面再加上个太阳。
降雨的动画不难,无非就是随机生成一些雨滴对象,每一帧实时更新位置即可。
关键在云朵的动画上,我们需要生成随机宽高的椭圆形云朵,并且云朵沿着随机椭圆轨迹运动。