{"id":17088244,"url":"https://github.com/youngliuxx/quartzcodeanimationdemo","last_synced_at":"2025-04-12T22:05:32.598Z","repository":{"id":205230936,"uuid":"99492478","full_name":"youngliuxx/QuartzCodeAnimationDemo","owner":"youngliuxx","description":"QuartzCode一款快速，轻量，强大的动画工具，可快速得到原生的ObjC/Siwft代码。","archived":false,"fork":false,"pushed_at":"2017-08-15T22:48:20.000Z","size":79,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-12T22:05:28.180Z","etag":null,"topics":["animation","ios","objective-c","swift","xcode"],"latest_commit_sha":null,"homepage":"","language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/youngliuxx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2017-08-06T14:37:32.000Z","updated_at":"2020-07-03T05:29:41.000Z","dependencies_parsed_at":null,"dependency_job_id":"1e9139b3-0b9d-4192-b0c1-e72878b177bf","html_url":"https://github.com/youngliuxx/QuartzCodeAnimationDemo","commit_stats":null,"previous_names":["youngliuxx/quartzcodeanimationdemo"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/youngliuxx%2FQuartzCodeAnimationDemo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/youngliuxx%2FQuartzCodeAnimationDemo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/youngliuxx%2FQuartzCodeAnimationDemo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/youngliuxx%2FQuartzCodeAnimationDemo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/youngliuxx","download_url":"https://codeload.github.com/youngliuxx/QuartzCodeAnimationDemo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248637769,"owners_count":21137538,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","ios","objective-c","swift","xcode"],"created_at":"2024-10-14T13:36:47.438Z","updated_at":"2025-04-12T22:05:32.579Z","avatar_url":"https://github.com/youngliuxx.png","language":"Objective-C","funding_links":[],"categories":[],"sub_categories":[],"readme":"# QuartzCode介绍\n\nQuartzCode一款快速，轻量，强大的动画工具，可快速得到原生的ObjC/Siwft代码。\b\n\n这是QuartzCode实现的动画效果：\n\n![](http://upload-images.jianshu.io/upload_images/747651-a9a7a0578fe8aa6d.gif?imageMogr2/auto-orient/strip)\n![](http://upload-images.jianshu.io/upload_images/747651-fad1f9fd1a7c3c73.gif?imageMogr2/auto-orient/strip)\n![](http://i2.wp.com/www.quartzcodeapp.com/wp-content/uploads/2014/09/water-fill-animation-220.gif)\n![](http://i0.wp.com/www.quartzcodeapp.com/wp-content/uploads/2014/10/watch2.gif)\n![](http://i2.wp.com/www.quartzcodeapp.com/wp-content/uploads/2014/09/iphone-vote-animate-example.gif)\n\n软件布局，如下图：\n\n![QuartzCode](http://i1.wp.com/www.quartzcodeapp.com/wp-content/uploads/2015/05/main1.3_3.png?w=1138)\n\n更多介绍可以到官网查阅：[QuartzCode](http://www.quartzcodeapp.com/)\n\n# QuartzCode实践\n\n这是本次教程要实现的动画效果，这个图是在Google上扒的，已无法知道出处。\n\n![](http://upload-images.jianshu.io/upload_images/747651-84019157b3d12c74.gif?imageMogr2/auto-orient/strip)\n\n## 解析动画\n\n下载.gif,用预览打开，找出动画的关键帧。这个比较简单就没什么好讲的。贴几张关键帧的照片就可以了。\n\n![第一帧](http://upload-images.jianshu.io/upload_images/747651-2a1b31dd28f6848c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300)\n\n动画开始的第一帧\n，由一个背景圆和中间的icon组成。\n\n![](http://upload-images.jianshu.io/upload_images/747651-1f4edda3328aef22.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300)\n\n这一帧进度条开始运动，进度条运动的时候并带旋转。同时进度条背景开始显现。\n\n![](http://upload-images.jianshu.io/upload_images/747651-c2e23a09e31e9238.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300)\n\n![](http://upload-images.jianshu.io/upload_images/747651-551c7f4d1e3dec81.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300)\n\n进度条显示完之后，进度条背景和进度条逐渐消失。中间的iCon消失，勾开始显现，圆的背景色逐渐改变为橙色。\n\n![](http://upload-images.jianshu.io/upload_images/747651-d23b00d666b24390.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300)\n\n最后一帧效果\n\n## 开始动手\n\n创建视图，如下：\n\n![](http://upload-images.jianshu.io/upload_images/747651-f2d7da6107d6b498.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n* `progress_background`对应进度条背景\n* `background`对应中间的大圆\n* `progress_line`对应滚动的进度条\n* `left_path`对应勾的左边\n* `right_path`对应勾的右边\n* `cloud_icon`对应云图标\n\n这几个视图很好创建，无非就是调位置和颜色。\n\n需要的注意的`progress_background`和`progress_line`的默认透明度设置为0，在动画中添加透明度，达到渐显的效果。\n\n将`left_path`和`right_path`和`progress_line`的`start`和`end`属性设置为1,1的`stroke`属性中的`start`和`end`属性设置为0,0或1,1，以保证勾并没有绘制，后面添加动画的时候再绘制。\n\n![](http://upload-images.jianshu.io/upload_images/747651-4ba6a82e059cc166.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/600)\n\n### 添加动画\n\n所有的动画和时间轴预览\n\n![](http://upload-images.jianshu.io/upload_images/747651-2aa88772d253980d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/600)\n\n#### Progress_background动画设置\n\n为`Progress_background动画配置`添加`Opacity`属性。\n\n![](http://upload-images.jianshu.io/upload_images/747651-3f5838ae015ded2d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n如图所示有1，2，3，4四个节点。1节点的`value`值设置为0，2节点的`value`值设置为1。这样渐显的效果就有了。3节点设置为1保持不变，4节点设置为0，以达到渐隐的效果。\n\n#### progress_line动画设置\n\n这个动画只有进度条稍微复杂一点。进度条所有动画预览，下图：\n\n![](http://upload-images.jianshu.io/upload_images/747651-9f088bd67dc92570.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/600)\n\n第一步设置`Stroke start`属性，From Value为第一个节点，To Value为第二个节点。时间可以自己调整。这样进度条顺时针旋转的动画就完成了。\n\n![](http://upload-images.jianshu.io/upload_images/747651-d05e2926800cb83c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n![](http://upload-images.jianshu.io/upload_images/747651-4cb164fb43cede09.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n第二步设置`Transform`的`To value`节点，设置旋转360度旋转。\n\n![](http://upload-images.jianshu.io/upload_images/747651-a302da49668a4fbc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n其它的动画属性，原理类似，就不一一列举了。最后导出代码，在模拟器的运行，不知道为什么在100%尺寸的模拟器上会有卡顿现象，但是我用真机和50%尺寸的模拟器就不会卡顿，如有知道原因的小伙伴，请留言。最后效果图如下：\n\n![](http://upload-images.jianshu.io/upload_images/747651-669aea065492ca02.gif?imageMogr2/auto-orient/strip)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoungliuxx%2Fquartzcodeanimationdemo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyoungliuxx%2Fquartzcodeanimationdemo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoungliuxx%2Fquartzcodeanimationdemo/lists"}