iOS 一个小动画效果-b
近期工作不忙,来一个需求感觉棒棒的,是一个比较简单的页面,如下图(图1)
应该很简单吧,没什么大的功能,就是一个展示,一个拨打电话,拨打电话不需要说,几行代码搞定,基本UI也不用说了,刚培训完的孩子们都能做,但是如果让这个页面动起来呢,会不会很漂亮呢(方然,这不是屁话么,先看看我做的效果吧,图2)
正题
会动得有云彩在飘,对号的缩放,添加绿色线条,我们一个一个的看
云彩的飘动
要做到这个会飘动的云彩,其实很简单,他是一个平移动画,我画了一个简单的图,可以看一下,便于理解嘛
只要云彩有透明部分,就可以了,但是当云彩向右移动的时候,屏幕上会有一快没有云彩试图覆盖的区域,尤其是当X等于屏幕的宽的时候
思路:
其实解决这个问题也是很简单的,我用两个imageView,imageView2的初始X值只要为负的屏幕宽,当imageView1移动的时候,让imageView2也跟着一起移动,他们两个以同样的速度来移动就可以了,等到imageView1的x等于屏幕的宽的时候,把imageView1的x值变成0然后继续执行这个动画,同时,当imageView2的X等于屏幕的宽的时候,把它的X变成初始的坐标
这样就可以了吧,代码如下:
+ (void)translationAnimationView:(UIView *)view animationDuration:(NSTimeInterval)timer animationBlock:(QuitRentAnimationBlock)block
{
[UIView animateWithDuration:timer animations:^{
view.x = view.x + SCREEN_WIDTH;
} completion:^(BOOL finished) {
if (finished) {
block();
}
}];
}
然后两个imageview分别调用,在完成的block里面继续调用自己
//给云彩1做平移动画
- (void)cloudImageView_1Animation
{
[QuitRentAnimation translationAnimationView:self.cloudImageView_1 animationDuration:10 animationBlock:^{
self.cloudImageView_1.x = 0;
[self cloudImageView_1Animation];
}];
}
//给云彩2做平移动画
- (void)cloudImageView_2Animation
{
[QuitRentAnimation translationAnimationView:self.cloudImageView_2 animationDuration:10 animationBlock:^{
self.cloudImageView_2.x = -SCREEN_WIDTH;
[self cloudImageView_2Animation];
}];
}
加好缩放以及绘制绿色虚线
由上面的效果gif可以看出来,加好缩放以及绘制绿色虚线是一个动画完成的
思路:
加好缩放以及绘制绿色虚线,他们是有先后顺序的,UIView动画有一个回调,我们在一个动画完成后再进行另外一个
第一,加号试图是一个缩放动画,做这个缩放动画其实很简单,按照上面的思路,先把他放大一下,再缩小一下,再放大,复原即可,demo如下:
+ (void)scalingAnimationView:(UIView *)view animationBlock:(QuitRentAnimationBlock)block
{
view.transform = CGAffineTransformMakeScale(1.0, 1.0);
[UIView animateWithDuration:0.3 animations:^{
view.transform = CGAffineTransformMakeScale(1.2, 1.2);
}completion:^(BOOL finish){
[UIView animateWithDuration:0.3 animations:^{
view.transform = CGAffineTransformMakeScale(0.9, 0.9);
}completion:^(BOOL finish){
[UIView animateWithDuration:0.3 animations:^{
view.transform = CGAffineTransformMakeScale(1.1, 1.1);
}completion:^(BOOL finish){
[UIView animateWithDuration:0.3 animations:^{
view.transform = CGAffineTransformMakeScale(1, 1);
}completion:^(BOOL finish){
block();
}];
}];
}];
}];
}
然后是绘制绿色虚线,这地方我遇到了挺多的坑,在现在的放慢gif中可以看出很大的缺点,就是绿色的线没有完全按照灰色的点上走,我目前还没有想到更好的优化方法,先把这个给大家分享出来,大家看一下吧
先创建一个绘制虚线试图
- (void)drawRect:(CGRect)rect{
[super drawRect:rect];
CGContextRef currentContext = UIGraphicsGetCurrentContext();
//设置虚线颜色
CGContextSetStrokeColorWithColor(currentContext, self.lineColor.CGColor);
//设置虚线宽度
CGContextSetLineWidth(currentContext, 2);
//设置虚线绘制起点
CGContextMoveToPoint(currentContext, 2 * 0.5, 0.0);
//设置虚线绘制终点
CGContextAddLineToPoint(currentContext, 2 * 0.5, CGRectGetHeight(self.bounds));
//设置虚线排列的宽度间隔:下面的arr中的数字表示先绘制3个点再绘制1个点
CGFloat arr[] = {2,2};
//下面最后一个参数“2”代表排列的个数。
CGContextSetLineDash(currentContext, 0, arr, 2);
CGContextDrawPath(currentContext, kCGPathStroke);
CGContextStrokePath(currentContext);
}
然后继承于这个view,做宽度为1,高度为我们想要的动画,动画代码如下:
//垂直移动动画
+ (void)verticalAnimationView:(UIView *)view animationDuration:(NSTimeInterval)timer animationDistance:(CGFloat)animationDistance animationBlock:(QuitRentAnimationBlock)block
{
[UIView animateWithDuration:timer animations:^{
view.height = view.height + animationDistance;
} completion:^(BOOL finished) {
if (finished) {
block();
}
}];
}
结合上面的思路,把每个动画点起来
//给对号线条,垂直虚线做动画
- (void)quitRentSucessImageViewAnimation
{
int i = 2;
// int i = 2;
// int i = 3;
CGFloat greenLine_1_Distance;
CGFloat greenLine_2_Distance;
if (i == 0) {
greenLine_1_Distance = 30 * KHeight_Scale;
}else if (i == 1){
greenLine_1_Distance = 60 * KHeight_Scale;
greenLine_2_Distance = 55 * KHeight_Scale;
}else if (i == 2){
greenLine_1_Distance = 60 * KHeight_Scale;
greenLine_2_Distance = 110 * KHeight_Scale;
}
WEAKSELF
[QuitRentAnimation scalingAnimationView:weakSelf.quitRentSucessImageView animationBlock:^{
[self addSubview:self.greenLine1];
[self.greenLine1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(weakSelf.quitRentSucessImageView.mas_bottom);
make.centerX.mas_equalTo(weakSelf.detainMoneyAccountTitleLabel.mas_right).offset(25/2+5);
make.width.mas_equalTo(2);
make.height.mas_equalTo(greenLine_1_Distance);
}];
[QuitRentAnimation verticalAnimationView:weakSelf.greenLine1 animationDuration:0.8 animationDistance:greenLine_1_Distance animationBlock:^{
if (i == 0) return ;
weakSelf.houseConnectSucessImageView.image = [UIImage imageNamed:@"icon_pay_money_duihao"];
[QuitRentAnimation scalingAnimationView:weakSelf.houseConnectSucessImageView animationBlock:^{
[weakSelf addSubview:weakSelf.greenLine2];
[weakSelf.greenLine2 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(weakSelf.houseConnectSucessImageView.mas_bottom);
make.centerX.mas_equalTo(weakSelf.detainMoneyAccountTitleLabel.mas_right).offset(25/2+5);
make.width.mas_equalTo(2);
make.height.mas_equalTo(greenLine_2_Distance);
}];
[QuitRentAnimation verticalAnimationView:weakSelf.greenLine2 animationDuration:1 animationDistance:greenLine_2_Distance animationBlock:^{
weakSelf.detainMoneyAccountSucessImageView.image = [UIImage imageNamed:@"icon_pay_money_duihao"];
[QuitRentAnimation scalingAnimationView:weakSelf.detainMoneyAccountSucessImageView animationBlock:^{
//
}];
}];
}];
}];
}];
}
链接:http://www.jianshu.com/p/9c3ccd2eeafe
iOS 一个小动画效果-b的更多相关文章
- iOS酷炫动画效果合集
iOS酷炫动画效果合集 源码地址 https://github.com/YouXianMing/Animations 效果绝对酷炫,包含了多种多样的动画类型,如POP.Easing.粒子效果等等,虽然 ...
- 收藏一个带动画效果的ScrollViewer以及ScrollBar的模板
这里介绍一个带动画效果的ScrollViewer和ScrollBar,总共分为两个资源字典,直接拿来引用即可: 1 ScrollBarStyle.xaml <ResourceDictionary ...
- 轻松实现Android,iOS的一个手势动画效果
先来看效果 这是iOS下的效果,android下完全一致.通过do_GestureView组件和do_Animation组件,deviceone能很容易实现复杂的跨平台纯原生动画效果,这个示例就是通过 ...
- iOS的GIF动画效果实现
引言:GIF图像格式是常见的一种动态图片格式,无论是在Web端还是在移动端都经常遇到,但是考虑目前iOS还无法原生展现GIF图片,而对于GIF的原生支持暂时也没有像JPG.PNG等图像格式支持得这么全 ...
- 推荐一个以动画效果显示github提交记录的黑科技工具:Gource
程序员每天都会使用到git的一系列命令.其中用git log命令可以查看提交历史记录: 今天Jerry给大家推荐一款视觉效果非常酷炫的工具,名叫Gource,是一个能够将git代码仓库的提交历史以动画 ...
- 一个带动画效果的颜色选择对话框控件AnimatedColorPickerDialog
android4.4的日历中选择日程显示颜色的时候有一个颜色选择对话框非常漂亮,模仿他的界面我实现了一个类似的对话框,而且带有动画效果. 代码的实现可讲的地方不多,主要是采用了和AlertDialog ...
- 【Android初级】如何实现一个有动画效果的自定义下拉菜单
我们在购物APP里面设置收货地址时,都会有让我们选择省份及城市的下拉菜单项.今天我将使用Android原生的 Spinner 控件来实现一个自定义的下拉菜单功能,并配上一个透明渐变动画效果. 要实现的 ...
- ios UIView常用动画效果
一 //调用 1 2 3 4 5 6 if(m_viewScenario.superview == nil)<br>{ m_viewScenario.alpha = 1.0; ...
- 一个小动画,颠覆你的CSS世界观
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- CSS中的图片路径问题
CSS中的背景图片写了相对路径,为什么不显示那? [解决方法] CSS中的背景图片路径应该写成相对于当前CSS文件的路径,而不是针对网站根目录的相对路径.
- Direct2D教程VII——变换几何(TransformedGeometry)对象
目前博客园中成系列的Direct2D的教程有 1.万一的 Direct2D 系列,用的是Delphi 2009 2.zdd的 Direct2D 系列,用的是VS中的C++ 3.本文所在的 Direct ...
- 编程实战——电影管理器之利用MediaInfo获取高清视频文件的相关信息
随着高速(20M)宽带.HTPC.大容量硬盘(3T)的普及,下载高清片并利用大屏幕观看也成为普通的事情. 随着下载影片的增多,管理就有了问题,有时在茫茫文件夹下找寻一个影片也是一件费时费力的事. 于是 ...
- IntelliJ IDEA 优化总结
1.修改JVM参数 (IntelliJ IDEA 10.0.1包含以上版本不需要设置) 修改idea.exe.vmoptions配置文件调整以下内容:-Xms256m-Xmx384m-XX:MaxPe ...
- 大量带BPM的跑步歌曲/跑步音乐下载
20150110停止更新告知:不知不觉本帖更新有近半年了.从最开始跑步已经四年多,一直是听着音乐跑的,音乐支持.陪伴.丰富着我的跑步之旅.直到上个月因一次觉得音乐吵,我开始有意地摘掉耳机去跑步,并开始 ...
- C#.NET常见问题(FAQ)-public private protectd internal有什么区别
首先要区分public和private,这两个修饰符是最常用的.Public就是对外公开的,private就是对外不公开的(类内部可以使用),比如下面我定义一个类的实例,自动补全代码中只有public ...
- 使用jstl报错:According to TLD or attribute directive in tag file, attribute value does not accept any expressions
使用jstl报错:According to TLD or attribute directive in tag file, attribute value does not accept any ex ...
- 动态加载jar包(二)
上次说的加载jar包,有几个问题没有解决: 1.如果项目包含了其他的jar包如何解决? 2.如何规范上传的jar包的类和方法? 下面就解决一下上面两个问题 一.首先编写被调用的类,这次使用maven工 ...
- Hadoop创建新用户
HDFS本身并没有提供用户名.组等的创建和管理,在客户端操作Hadoop时,Hadoop自动识别执行命令所在的进程的用户名和用户组,然后检查是否具有权限.启动Hadoop的用户即为超级用户,可以进行所 ...
- 如何根据搜索页面内容得到的结果生成该元素的xpath路径
如何根据搜索页面内容得到的结果生成该元素的xpath路径?