核心动画实现书本翻页效果加载动画

经常看到一些很好的动画加载视图,闲来无事就写了一个书本翻页样式的动画加载视图,核心技术是CALayer+CoreAnimation。

正题如下:

创建一个单独的layer:

   /*        使用类方法创建CAlayer对象         */

CALayer *  layer = [CALayer layer];

/*        CATransform实际上是一个结构体 因此不能直接对内部元素直接赋值         */

CATransform3D transform = layer.transform;

/*        设置layer的立体效果值 m34为该值 渲染立体效果         */

transform.m34 = 10.5/-2000;

layer.transform = transform;

/*        设置layer的背景颜色,注意是CGColor类型         */

layer.backgroundColor = [k_COLOR_STOCK[_currentIndex%k_COLOR_STOCK.count] CGColor];

/*        设置锚点,锚点即动画的中心点,默认为(二维环境)(0.5.0.5),分别表示X轴中点 Y轴中点         */

layer.anchorPoint = CGPointMake(0, 0.5);

layer.frame = CGRectMake(200, 100, 30, 45);

/*        设置layer的中心点,相当于UIView对象的center熟悉         */

layer.position = CGPointMake(K_IOS_WIDTH/2, K_IOS_HEIGHT/2-50);

[self.layer addSublayer:layer];

创建翻页动画

  /*        创建翻页动画         */

CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];

/*        transform.rotation.y的动画开始值         */

basic.fromValue  = @(-M_PI );

/*        transform.rotation.y的动画结束值         */

basic.toValue = @(0);

/*        是否在动画结束后自动按照反向动画回归原状态         */

basic.autoreverses = NO;

/*        动画执行次数         */

basic.repeatCount = 1;

/*        动画时长         */

basic.duration = 1.0;

/*        动画填充模式         */

basic.fillMode = kCAFillModeRemoved;

/*        设置代理         */

basic.delegate = self;

[layer addAnimation:basic forKey:@"basc"];

当按照上方法循环添加多个layer动画时,并间隔0.2s执行,就会有从左到右的翻页动画效果。如果想要更加完美,可以将这些layer添加到数组,在从左到右的动画完成后,给数组中的layer添加一个反向动画,即可实现来回的翻页动画。效果图如下:

                      

时间: 2024-10-06 03:18:40

核心动画实现书本翻页效果加载动画的相关文章

css加载动画...

1 加载动画... 2 3 4 5 <p>加载动画...</p> 6 <p> </p> 7 <p> </p> 8 <style><!-- 9 .container { 10 position: absolute; 11 top: 0; 12 left: 0; 13 bottom: 0; 14 right: 0; 15 display: flex; 16 align-items: center; 17 justify-

BookBlock - 效果非常真实的书本翻页预览

这个名为 BookBlock 的图片预览效果是一个书展示或网上书店的概念,已全屏打开3D页面导航网格的形式显示图书的详细信息.我们可以打开书预览的摘录,其中有一些细节的网格.对于图书预览,我们在使用 BookBlock 全屏展示,对于更小的书本我们使用3D的方式打开. 在线演示      源码下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用

Activity切换动画(overridePendingTransition)-翻页效果

Activity的切换动画指的是从一个activity跳转到另外一个activity时的动画.{它包括两个部分:一部分是第一个activity退出时的动画:另外一部分时第二个activity进入时的动画:在Android的2.0版本之后,有了一个函数来帮我们实现这个动画.这个函数就是YoverridePendingTransitionj这个函数有两个参数,一个参数是第一个activity退出时的动画,另外一个参数则是第二个activity进入时的动画. 这里需要特别说明的是,关于override

iOS帅气加载动画、通知视图、红包助手、引导页、导航栏、朋友圈、小游戏等效果源码

iOS精选源码 如丝般顺滑的微信朋友圈(点赞,评论,图文混排表情,... 动态菜单第三版本:动态项,自适应方向 仿appstore首页滚动效果 iOS 透明导航栏方案 TransparentNavigation 一键合成APP引导页,包含不同状态下的引导页操作方式,同时... 很帅的数据加载动画(可以用于数据列表加载的展现) 实现通知视图,零耦合JMNotifyView DDGBannerScrollView使用文档 微信7.0红包助手 ios CAAnimation动画和SceneKit小游戏

HTML5翻页效果文字特效怎么实现呢

HTML5翻页效果文字特效怎么实现呢,之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页.于是我兴致勃勃的点开源码看了一下,发现其实实现也挺简单的,主要利用了CSS3的transform属性,分别对X轴.Y轴.Z轴进行翻转,先看一下效果截图. 看效果图这些文字是不是很有立体的感觉,而这个立体的感觉并不是有投影和阴影来实现的,而是通过翻转. 接下来我们来看一下源码.首先是HTML代码,非常简单,列出我们需要渲染的文字: <div class=&qu

简单做出HTML5翻页效果文字特效

之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页.于是我兴致勃勃的点开源码看了一下,发现其实实现也挺简单的,主要利用了CSS3的transform属性,分别对X轴.Y轴.Z轴进行翻转,先看一下效果截图. 看效果图这些文字是不是很有立体的感觉,而这个立体的感觉并不是有投影和阴影来实现的,而是通过翻转.        DEMO演示效果 接下来我们来看一下源码.首先是HTML代码,非常简单,列出我们需要渲染的文字: <div class="

transform3D实现翻页效果

---恢复内容开始--- 闲篇 最近升级了下百度音乐,唯一的感觉就是动画效果很炫丽.我不是个对产品很敏感的人,但是这段时间观察一些大厂的产品发现现在的APP越来越重视动画效果了.大家可能没有注意过,连支付宝的一个很边缘很边缘的小角落(“财富 ->芝麻信用分 ->信用猜猜”)动画也是很炫的.随着手机硬件的增强以及广大苦逼程序员的不懈努力与钻研,APP的会越来越强调交互性,物理效果(UIDynamic)和动画效果(CoreAnimation)会越来越受欢迎. 准备 好吧,闲话不说了,首先跟大家坦白

c#翻页效果

用c#和GDI+实现杂志翻页动画效果时间:2010-01-13 blog.csdn.net 周公 - 说明:以前本人参与个一个电子杂志项目,当时要求实现模拟现实生活中的杂志翻页动画效果,别人推荐了这篇文章,最后达到了我想要的效果,今天尝试把这篇文章翻译了一下.希望对英语水平不太好的同行有帮助.如果你的英语水平足够好,我推荐你阅读英文原文,网址是:http://www.codeproject.com/KB/GDI-plus/TurnThePage.aspx,同时希望大家原谅本人的翻译水平. 介绍

android开发教程:android手势翻页效果

听麦子学院android开发老师说要实现手势翻页效果,主要用到ViewFlipper和GestureDetector.  ViewFlipper变化当前显示内容,GestureDetector监听手势.  用于多页的展示非常酷.  现在我就给大家简单说明下,  首先创建工程:TestFlip,创建主Activity:TestFlip.  在res/layout/main.xml中添加flipper信息,如下:  Java代码   1. <?xml version="1.0" en