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

思诗
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,101评论 3 119
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 177,249评论 25 709
  • 今天我去奶奶家挖笋了,挖完笋回家里吃饭了,吃完饭就开始剥笋壳,把剥下的笋壳当做导弹,找到鸡就去用笋壳丢那只鸡。有一...
    严爸学习星球阅读 1,747评论 0 0
  • 因工作原因,与企业老板们接触多了,感觉他们多一肚子怨言,满肚子心酸。昨晚,又一位创业小成的兄弟吐苦水。 ...
    奇门勇阅读 1,598评论 0 0
  • 一. 心理咨询危机干预的3种理论模式 目前心理咨询危机干预的理论模式有3种,即平衡模式,认知模式,心理社会转变模式...
    岛屿书阅读 7,486评论 0 3

友情链接更多精彩内容