效果圖

思詩

實現(xiàn)思路

多云(cloud)的動畫可以拆分成兩個部分：

1. 飛鳥動畫

   • 飛鳥動畫，飛翔的動畫是一組幀動畫。共8張圖組成。
   • 在幀動畫的基礎上，增加了橫向移動的動畫（跟云飄動是一個原理）
   • 倒影的動畫跟上面的一樣，只是把透明度調(diào)成了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種天氣 —— 晴天、陰天、雨天、雷陣雨、下雪。均已完工，接下來的一段時間，會陸續(xù)更新后面的實現(xiàn)方式。著急的小伙伴可以先去 Github。

動畫已經(jīng)運用在這個APP里，思詩 —— 思念詩歌，每日一詩。每天看天氣的同時，讀上一首好詩，豈不美哉！
若是感興趣，趕快去下載體驗吧，點擊上面鏈接或者App Store搜索“思詩”。

Github鏈接:

https://github.com/whbalzac/WHWeatherAnimation

思詩