03-Framer基础-Animation动画

作者: Dosen | 来源:发表于2016-07-04 13:12 被阅读138次

Dosen原创

开始学习Framerjs,边学边翻译,也加了一些我学习过程中的理解。写下来留作以后查阅,看官如果发现有地方写的不对请指出。转载请联系作者。


Animation      动画


Properties of a layer can be animated, including x, y, width, height, scale, opacity, rotation and more. Multiple properties can be animated at once.

层的属性可以被动画,包括x,y,宽,高,缩放,透明度,旋转,等。多种属性的动画可以一起执行。

这段代码给layerA创建了一个透明度变为0.5的动画。



Timing      时间

You can define the duration of an animation, except when using spring curves. Animations can also be delayed and repeated. All durations in Framer are defined in seconds.

你可以定义一个动画的持续时间,除了当使用弹性曲线时。动画可以添加延迟和重复。在Framer中所有持续都用秒为单位。

这段代码给layerA创建了一个透明度变为0.5的动画。并且使用ease这个预置的动画曲线,动画重复1次,延迟2秒,持续1秒。


Curves      曲线

Animations optionally take a curve that describe the type of animation. You can use pre-defined curves like 'linear' or 'ease-in', custom bezier curves and spring animations. Below is an overview of different curves.

动画的类型用曲线来描述。你可以使用预定义曲线,比如“linear”,“ease-in”,自定义贝塞尔曲线和弹性动画。下面是不同曲线的预览。



Summary      概要


Multiple properties can be animated at once

多种属性动画可以一起执行。

Animations can be timed, delayed and repeated

动画可以被定义时间,延迟,重复次数。

Framer contains various animation curves, including spring curves

Framer包含多种动画曲线,包含弹性曲线。

相关文章

  • 03-Framer基础-Animation动画

    Dosen原创 开始学习Framerjs,边学边翻译,也加了一些我学习过程中的理解。写下来留作以后查阅,看官如果发...

  • Android 动画

    Android基础动画 Tween Animation 变换动画 Frame Animation 帧动画 Layo...

  • Android之基础动画

    Android基础动画 Tween Animation 变换动画Frame Animation 帧动画Layo...

  • 动画

    Core Animation iOS 动画主要是指Core Animation框架, 基础动画(CABasicAn...

  • Android Animation

    Android 动画 标签(空格分隔): android animation 动画基础 Android 基础动画分...

  • IOS动画学习小记(3)-Core Animation-基础动画

    Core Animation - 基础动画 CAAnimation:核心动画的基础类(不能直接使用),负责动画运行...

  • android动画你看这篇就够了

    1、基础知识Android动画学习笔记-Android Animation

  • iOS - 基础动画&转场动画

    基础动画 1、基础动画的属性详解 注:Core Animation的动画执行过程都是在后台操作的,不会阻塞主线程....

  • [iOS]动画属性

    一 、基础动画 1、基础动画的属性详解 注:Core Animation的动画执行过程都是在后台操作的,不会阻塞主...

  • iOS-核心动画

    前言:核心动画的基础知识,包括基本动画、帧动画、转场动画相关知识。 一、核心动画(Core Animation) ...

网友评论

    本文标题:03-Framer基础-Animation动画

    本文链接:https://www.haomeiwen.com/subject/cqwcjttx.html