[翻译] Canvas 不用写代码的动画

简介:

Canvas 不用写代码的动画

https://github.com/CanvasPod/Canvas

Canvas is a project to simplify iOS development for both designers and developers. It had been difficult for designers to get hands on building the product with the lack of objective-c and Xcode experience, and a hard time for developer to use reasonable amount of time and lines of code just to achieve really simple effects.

With Canvas, creating stunning animations requires zero lines of code, trendy effects like the Parallax headers, Sticky sections, Blurred Backgrounds, will be as simple as few lines of code changes.

Canvas 是一个用来简化 iOS 设计的项目。对于初级开发者而言,如果连 Xcode 都用不顺手,甚至为了实现一个效果需要写好多好多的代码而苦逼。

使用 Canvas ,创建一个动画效果只需要一行代码,那些时髦的效果诸如视差、不动的区域、模糊化的背景,这些只需要几行代码。

 

Demo App

The demo app in this project uses CocoaPods, please run pod install after you download this project, then open Canvas.xcworkspace.

demo 使用的 CocoaPods,在下载这个应用之前,请先运行 pod install,之后再打开 Canvas.xcworkspace。

See this screencast in action:

Unable to build demo?

If you're getting some errors like Accelerate.framework not include, please update your CocoaPods version:

$ [sudo] gem install cocoapods

We also have a live demo avaliable at homepage.

如果编译时提示了你有些错误如 Accelerate.framework not include ,请更新你的 CocoaPods 的版本:

 

Getting Started

If you're already on CocoaPods, installing our library is easy:

如果你已经有 CocoaPods 了,安装我们的库将会很容易:

$ edit Podfile
platform :ios, '7.0'
pod 'Canvas', '~> 0.1'

Make sure you also update the dependencies by running this command afterwards:

确保你更新了依赖哦:

pod install

Then you should now have the Xcode workspace (.xcworkspace) ready.

现在你应该已经有工程文件了。

$open App.xcworkspace

That's it and you are good to go! See our blog posts for hands on tutorial.

你可以在我们博客上看手把手教的教程。

 

How to Use

Using Interface Builder (no code required)

Specify the class CSAnimationView, and configurate the runtime attributes durationdelay, and type.

Please also get started with our more detailed explaination on what Canvas can do.

指定这个 CSAnimationView,配置运行时的参数 duration,delay,以及 type。

你也可以从我们这个有着更多解释信息的项目demo中着手。

 

Using Code

It's very similar to using Interface Builder, instead you just setup the custom view in code.

与使用 IB 很类似,你也可以用几行代码来搞定。

CSAnimationView *animationView = [[CSAnimationView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];

animationView.backgroundColor = [UIColor whiteColor];

animationView.duration = 0.5;
animationView.delay    = 0;
animationView.type     = CSAnimationTypeMorph;

[self.view addSubview:animationView];

// Add your subviews into animationView
// [animationView addSubview:<#(UIView *)#>]

// Kick start the animation immediately
[animationView startCanvasAnimation];

Requirements

iOS 7, Xcode 5

 

Who's behind?

目录
相关文章
|
4天前
|
前端开发
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
8 0
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
|
8天前
|
23天前
|
前端开发 JavaScript API
如何使用 Canvas 实现复杂的动画效果?
【10月更文挑战第24天】使用Canvas实现复杂的动画效果,需要综合运用JavaScript、数学知识以及对Canvas API的深入理解。
51 2
|
23天前
|
XML 前端开发 JavaScript
如何使用 SVG 和 Canvas 来创建动画?
【10月更文挑战第24天】使用 SVG 和 Canvas 创建动画都有各自的特点和优势,SVG 更适合基于 XML 和 CSS 的简单动画,而 Canvas 则更适合通过 JavaScript 实现复杂的、高性能的动画效果。在实际应用中,可以根据具体的需求和场景选择合适的技术来创建动画。
38 1
|
28天前
|
前端开发 JavaScript
Canvas三维变化背景动画HTML源码
Canvas三维变化背景动画HTML源码
26 5
|
5月前
|
前端开发
Canvas绘画之倒三角形,渐变色效果源码
Canvas绘画之倒三角形,渐变色效果源码
|
5月前
|
前端开发 JavaScript 流计算
canvas系列教程05 ——交互、动画
canvas系列教程05 ——交互、动画
25 0
|
5月前
|
前端开发
Canvas背景色绘画样式设计
Canvas背景色绘画样式设计
|
7月前
|
前端开发
前端原生 CSS 跑马灯效果,无限轮播(横竖版本,带渐变遮罩,简单实用)
前端原生 CSS 跑马灯效果,无限轮播(横竖版本,带渐变遮罩,简单实用)
77 0
|
12月前
|
前端开发
使用 CSS 的水波文本动画(免费代码)
使用 CSS 的水波文本动画(免费代码)
107 0