framer动效12

#设置屏幕颜色

Screen.backgroundColor="white"

#新建layerA层级

layerA=new Layer

x: Align.center

y: Align.center

width: 300

height: 300

backgroundColor: "pink"

#layerb是文字图层

layerB=new Layer

y: 567

x: 275

backgroundColor: "null"

html: 1

style:

textAlign:"center"

fontSize:"90px"

lineHeight:"180px"

#新建layerA的状态，使他旋转360度，并且圆角增大至150（变成圆形）

layerA.states.add

change:

rotation:360

borderRadius: 150

#设置layerA的状态变化动画，时间

layerA.states.animationOptions=

repeat: 1

curve: "ease-in-out"

time: 7

#layerA的状态切换

layerA.states.switch("change")

#监听layerA的旋转，并将0-360°转化为1-100

layerA.on "change:rotation",->

percentage=Utils.modulate layerA.rotation,[0,360],[0,100]

layerB.html=(Utils.round percentage,0)+"%"