iOS实现数字倍数动画效果

前言

一个简单的利用 透明度和 缩放 实现的 数字倍数动画

效果图:

实现思路

上代码 看比较清晰

// 数字跳动动画
- (void)labelDanceAnimation:(NSTimeInterval)duration {
 //透明度
 CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
 opacityAnimation.duration = 0.4 * duration;
 opacityAnimation.fromValue = @0.f;
 opacityAnimation.toValue = @1.f;

 //缩放
 CAKeyframeAnimation *scaleAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
 scaleAnimation.duration = duration;
 scaleAnimation.values = @[@3.f, @1.f, @1.2f, @1.f];
 scaleAnimation.keyTimes = @[@0.f, @0.16f, @0.28f, @0.4f];
 scaleAnimation.removedOnCompletion = YES;
 scaleAnimation.fillMode = kCAFillModeForwards;

 CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
 animationGroup.animations = @[opacityAnimation, scaleAnimation];
 animationGroup.duration = duration;
 animationGroup.removedOnCompletion = YES;
 animationGroup.fillMode = kCAFillModeForwards;

 [self.comboLabel.layer addAnimation:animationGroup forKey:@"kComboAnimationKey"];
}

利用一个透明度从 0 ~ 1之间的alpha,然后缩放 之后加到动画组实现一下就好了

切记动画完成最好移除 否则可能引起动画内存问题

这里设置斜体字体

self.comboLabel.font = [UIFont fontWithName:@"AvenirNext-BoldItalic" size:50];

看着比较明显

最后按钮点击的时候调用

- (IBAction)clickAction:(UIButton *)sender {
 self.danceCount++;
 [self labelDanceAnimation:0.4];
 self.comboLabel.text = [NSString stringWithFormat:@"+ %tu",self.danceCount];
}

如果实现 dozen动画的话很简单, danceCount % 10 == 0 求模就行了.

总结

这个动画比较适合 有些直播场景的点击操作计数相关.

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

时间: 2019-02-26

IOS 圆球沿着椭圆轨迹做动画

前言:最近公司项目有个需求,需要实现让一个view沿着椭圆轨迹做动画,效果实现后,就自己封装做了一个小demo,使用更方便.先看效果: 椭圆.gif 效果图中的白色椭圆轨迹线其实是用贝塞尔曲线画出来的,为了清晰的看出来运动的轨迹.其实项目中是不显示轨迹线的,也就是小球是悬空运动的.若不需要删除掉即可. 实现步骤: 1.首先设定关键帧动画CAKeyframeAnimation的一些属性,比如运动时间和重复次数和calculationMode模式,我们选择kCAAnimationPaced 使得动画

IOS绘制动画颜色渐变折线条

先给大家展示下效果图: 概述 现状 折线图的应用比较广泛,为了增强用户体验,很多应用中都嵌入了折线图.折线图可以更加直观的表示数据的变化.网络上有很多绘制折线图的demo,有的也使用了动画,但是线条颜色渐变的折线图的demo少之又少,甚至可以说没有.该Blog阐述了动画绘制线条颜色渐变的折线图的实现方案,以及折线图线条颜色渐变的实现原理,并附以完整的示例. 成果 本人已将折线图封装到了一个UIView子类中,并提供了相应的接口.该自定义折线图视图,基本上可以适用于大部分需要集成折线图的项目.若你

iOS渐变圆环旋转动画CAShapeLayer CAGradientLayer

iOS渐变圆环旋转动画CAShapeLayer CAGradientLayer shape.gif demo.png - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. CALayer *layer = [CALayer layer]; layer.backgroundColor = [UIColor redColor

iOS 进度条、加载、安装动画的简单实现

首先看一下效果图: 下面贴上代码: 控制器ViewController: #import <UIKit/UIKit.h> @interface ViewController : UIViewController @end /*** ---------------分割线--------------- ***/ #import "ViewController.h" #import "HWWaveView.h" #import "HWCircleVi

iOS 实现简单的加载等待动画示例(思路与实现)

先看下最后基本要实现的效果 总结一下自己的实现思路与所用到的类 1.这个肯定是要自定义的View类,起名为XDColorCircle吧,最后用的时候达到这样的效果 //创建XDColorCircle的实例化对象 XDColorCircle *circle=[[XDColorCircle alloc]initWithFrame:CGRectMake(0 ,100,self.view.frame.size.width,200)]; //添加到视图上展示 [self.view addSubview:c

IOS 实现3D 浮动效果动画

涉及到的技术点 CATransform3DRotate 转换坐标系 整体视图的层级结构 tvOSCardView cardImageView cardParallaxView 转换坐标系的代码 CGFloat xFactor = MIN(1, MAX(-1, (touchPoint.x - (self.bounds.size.width / 2)) / (self.bounds.size.width / 2))); CGFloat yFactor = MIN(1, MAX(-1, (touchP

iOS 水波纹动画的实现效果

本人最近在研究iOS动画,至于原理,我不在这里说了.毕竟这里的标题:水波纹的实现. 在这里,要学习水波纹的实现,首先要知道以下几点知识: 1.正弦函数:y = Asin(wx +b) + c.相信大家都比较熟悉. 2.CAShapeLayer的简单实用,相信看一下,就是知道其大概的用途了,形状Layer层.和用户显示图形的Layer,继承于layer,好了,废话不多说,直接上图吧. 上面的知识点,我会以代码的方式,梳理上面的知识点,不过首先我还是上传效果图吧,有图有真相,才是事实嘛. 1.效果图

IOS等待时动画效果的实现

查询时间或长或短,为了提升用户体验,目前用的比较多的手段之一就是查询等待时添加一个动态等待效果.当我们在请求网络时加载页面时有个动作效果,效果图如下: 源代码可以网上找开源项目Coding.net,上面的效果原理为两张图片组合,外面那个则为动画转动,里面的图标则是透明度的变化:主要代码如下: 1:把它封装在EaseLoadingView里面 @interface EaseLoadingView : UIView @property (strong, nonatomic) UIImageView

iOS实现滚动字幕的动画特效

效果图 开始上代码 滚动字幕的原理是用timer定时器间隔一定的时间来驱动scrollView上的内容偏移,来实现滚动的效果,原理比较简单,关键是有些细节需要处理好,实现流畅效果的同时要考虑到性能优化 这里是.h文件的接口方法及属性,可适应大部分自定义场景 /*初始化*/ -(instancetype)initWithFrame:(CGRect)frame textArray:(NSArray *)textArray colorArray:(NSArray *)textColorArray; /

iOS自定义UIButton点击动画特效

借鉴相关资料,整理了一个很有意思的button动画效果,iOS自定义UIButton点击动画特效 先看一下效果图: 下面贴上代码: ViewController: #import <UIKit/UIKit.h> @interface ViewController : UIViewController @end #import "ViewController.h" #import "HWButton.h" #define mainW [UIScreen m

c#滚动字幕动画窗体制作步骤

c#制作的滚动字幕的动画窗体,刚学的一个例子与大家分享一下 1.先打开vs创建一个工程,创建一个窗体应用程序如下图: 2.从工具箱里向窗体添加lable和timer控件,并设置界面内容,如下图: 3.设置窗体的属性,如下图: 4.双击窗体添加Form1_Load事件,在事件函数中添加如下代码: this.timer1.Interval = 10; this.timer1.Enabled = true; this.WindowState = FormWindowState.Maximized; 如

c#之滚动字幕动画窗体的实现详解

提示:运行该程序可双击滚动字幕推出程序.(当然任务管理器也可以...)步骤如下:1.新建窗体,并设置窗体的FormBorderStyle属性为None,且"TransparencyKey"属性为"Control".2.使用1个Label空间,Text任意写,Font等样式自定.3.使用1个Timer空间,设置其Enable为True,Interval设置为100:4.添加Form1的窗体加载事件,代码如下: 复制代码 代码如下: private void Form1

jQuery实现分章节锚点“回到顶部”动画特效代码

本文实例讲述了jQuery实现分章节锚点"回到顶部"动画特效.分享给大家供大家参考,具体如下: 这里演示基于jquery实现的分章节动画实现"回到顶部"的效果,可通过 网页顶部的数字序号直接进入网页的章节,当处于第二章节的时候,网页右侧会显示竖排的控制按钮,点击按钮会回到相应章节,其实也就是定义好的锚点,当然也可回到顶部,网页上见到的回顶部大多不是这个样子,所以本款效果还挺新颖. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js

WPF实现上下滚动字幕效果

本文实例为大家分享了WPF上下滚动字幕的具体代码,供大家参考,具体内容如下 XAML代码: <local:WorkSpaceContent x:Class="SunCreate.CombatPlatform.Client.NoticeMarquee" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.c

iOS UIScrollView滚动视图/无限循环滚动/自动滚动的实例代码

我们都知道UIScrollView有一种很流畅的切换效果,结合UIPageControl的辅助展示效果,就可以完成一个很不错的产品介绍功能页面.下面给大家分享iOS UIScrollView滚动视图/无限循环滚动/自动滚动功能,具体代码如下所示: <UIScrollViewDelegate> #define WIDTH [[UIScreen mainScreen] bounds].size.width #define HEIGHT [[UIScreen mainScreen] bounds].

利用iOS开发实现翻转扑克牌动画的方法

前言 本文主要给大家介绍的关于利用iOS开发实现翻转扑克牌动画的方法,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍吧. 动画效果 实现原理 实现原理就是创建三个扑克牌pockerView , 先在扑克牌上添加一个imageview,作为牌的背面.然后实现翻转动画,在翻转的时候将imageview移除,添加另一个imageview作为正面. 核心代码: 方法一: 翻转动画,内部实现还是方法二 + (void)transitionWithView:(UIView *)view dura

JavaScript+html5 canvas实现图片破碎重组动画特效

也许你见过HTML5图片破碎动画特效,实现的原理也挺简单的.但是你应该没有见过视频也可以破碎重组,这个HTML5动画就是利用Canvas的相关特性,实现了点击鼠标让视频破碎重组的效果.在视频区域点击鼠标,即可让该区域的视频破碎,让后经过一段时间后,破碎的区域又可以重组还原,视觉效果非常棒. HTML代码 <div style="display:none"> <video id="sourcevid" autoplay="true"

PHP使用GIFEncoder类生成gif动态滚动字幕

今天在公司,经理让做一个滚动字幕.但是,不许生成gif图片.所以上网找了GIFEncoder这个类库.确实很好用,但是,应用过程中也出现了一些问题,现在写在这里,以供后来人参考,少走弯路. 文字滚动分为两种情况.第一种为水平滚动: 复制代码 代码如下: <?php require_once("GIFEncoder.class.php"); $count=0;   //设置默认计数器 while(true){     $str = $_REQUEST['str'] ? $_REQU