iOS 天气动画之晴天(sun)

效果图

sun

实现思路

晴天(sun)的动画可以拆分成两个部分：

1. 太阳旋转
2. 云飘动

所以思路特别简单，做一个旋转的动画，再做一个横向移动的动画。

CABasicAnimation* rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
rotationAnimation.fromValue = [NSNumber numberWithFloat:fromFloat * M_PI];
rotationAnimation.toValue = [NSNumber numberWithFloat:(fromFloat + 2.0 ) * M_PI];
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
rotationAnimation.duration = duration;
rotationAnimation.repeatCount = MAXFLOAT;
rotationAnimation.cumulative = NO;
rotationAnimation.removedOnCompletion = NO;
rotationAnimation.fillMode = kCAFillModeForwards;

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

思诗