02-Framer基础-Layers层

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

    Dosen原创

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


    Layers      层


    A layer is a rectangle that draws elements. Layers can display images, videos or text. Every layer inherits a set of default properties: width, height and a blue background.

    层是一个绘制的矩形元素。层可以显示图片,视频或文字。每个层都继承一系列的默认属性:宽,高,和一个蓝色背景。

    这段代码创建了一个位置在0.0,宽高为100px的层。

    层的概念就像一个容器,所有可视元素都要放在这个容器里。




    Properties      属性

    A layers position, size and looks are defined by its properties. Besides being able to define an image, background, or video, you can also transform, hide layers, scale layers and more.

    一个层的位置、尺寸,看起来的样子是通过它的属性来定义的。不光可以定义一个图片、背景或视频,你还可以对层进行移动、隐藏、缩放、等

    这段代码创建了一个名字是layerB的层,颜色是#2DD7AA,宽高为60px,缩放值为1,描边3px。

    You can also define and override properties after having created a layer.

    你也可以在创建了一个层后对它的属性进行再定义、重写。

    这段代码对layerB的描边,旋转,透明度,缩放属性进行了更改,再定义。



    Positioning      位置

    A layer can be positioned with its x and y properties. These values define the distance from the top-left corner of the canvas. The minX, minY, midX, midY, maxX and maxY values can also be used to position a layer.

    一个层可以通过它的x,y属性进行定位。这些值表示层到视图左上角的距离。minX(左上角到图层最左的距离),minY(左上角到图层最顶的距离),midX(左上角到图层水平中心的距离),midY(左上角到图层垂直中心的距离),maxX(左上角到图层最右的距离),maxY(左上角到图层最底的距离),这些值也可以被用于定义层的位置。

    The distance from the top-left corner of the canvas to the center of a layer can be calculated with midX and middy.

    从视图左上角到层中心的距离可以用midX和midY计算。

    You can center a layer within its superLayer (see Hierarchy), or on the screen by calling the center() function. Layers can also be exclusively centered horizontally or vertically.

    你可以把一个层居中到它的父类层,或者使用center()方法。层就可以到中心点,或水平中心或垂直中心。



    Hierarchy      层级

    Layers can have a parent and/or children. Parent layers are called superLayers, and child layers are called subLayers. Layers inherit properties from their superLayers.

    层可以有父层、子层。父层被称作superLayers(超级层?),子层被称作subLayers(节点层?)。层继承父层的属性。

    这段代码两行的意思是一样的。第一行是指定layerB的父层为layerA,第二行是指定layerA的子层为layerB。



    Layer types      层的类型

    Layers can contain images, videos and text.

    层可以容纳图片、视频、文字。

    这段代码示例了添加不同类型元素的方法。



    Summary      概要


    — Layers are defined by properties

    使用属性定义层。

    — Layers have hierarchy and inherit properties from their parents

    层有层级并且从它们的父类中继承属性。

    — Layers can be transformed, scaled, masked, rotated and more

    层可以被移动、缩放、遮罩、旋转,等。

    — Layers can contain images, videos and text

    层可以容纳图片、视频、文字。

    相关文章

      网友评论

        本文标题:02-Framer基础-Layers层

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