效果图
实现思路
晴天(sun)的动画可以拆分成两个部分:
- 太阳旋转
- 云飘动
所以思路特别简单,做一个旋转的动画,再做一个横向移动的动画。
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链接: