iOS 天气动画之多云(cloud)

效果图

实现思路

多云(cloud)的动画可以拆分成两个部分：

1. 飞鸟动画

   • 飞鸟动画，飞翔的动画是一组帧动画。共8张图组成。
   • 在帧动画的基础上，增加了横向移动的动画（跟云飘动是一个原理）
   • 倒影的动画跟上面的一样，只是把透明度调成了0.4

2. 云飘动

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.translation.x"];
animation.toValue = toValue;
animation.duration = duration;
animation.autoreverses = autoreverses;
animation.removedOnCompletion = NO;
animation.repeatCount = MAXFLOAT;
animation.fillMode = kCAFillModeForwards;

Usage

1. import header

#import "WHWeatherView.h"

2. initialization

WHWeatherView *weatherView = [[WHWeatherView alloc] init];
self.weatherView.frame = self.view.bounds;
[self.view addSubview:self.weatherView];

3. show animation

typedef NS_ENUM(NSInteger, WHWeatherType){
    WHWeatherTypeSun = 0,
    WHWeatherTypeClound = 1,
    WHWeatherTypeRain = 2,
    WHWeatherTypeRainLighting = 3,
    WHWeatherTypeSnow = 4,
    WHWeatherTypeOther = 5
};

- (void)showWeatherAnimationWithType:(WHWeatherType)weatherType;

More

WHWeatherAnimation 目前有5种天气 —— 晴天、阴天、雨天、雷阵雨、下雪。均已完工，接下来的一段时间，会陆续更新后面的实现方式。着急的小伙伴可以先去 Github。

动画已经运用在这个APP里，思诗 —— 思念诗歌，每日一诗。每天看天气的同时，读上一首好诗，岂不美哉！
若是感兴趣，赶快去下载体验吧，点击上面链接或者App Store搜索“思诗”。

Github链接:

https://github.com/whbalzac/WHWeatherAnimation