如何在 Meteor 中为 famo.us 表面设置动画

Question

我正在使用 Meteor 的 famous-views 包，我喜欢它。我创建了一个简单的 UI，其中包含一些模板和一些表面等等。现在我想做一些简单的动画。我想做这样的事情：

surface.on("click", function (e) {
  transform.setTransform(endPos, easeTransition);
  startPos = [endPos, endPos = startPos][0];
});

mainCtx.add(transform).add(surface);

问题是，表面是自动添加到上下文中的，所以我无法在添加之前添加表面。

Answer 1

在您的模板中

<template name="appMainView">
    {{#Surface id="redbox" size="[250,350]" origin="[.5, .5]" align="[.5, .5]" class="redCard" modifier="Modifier"}}
        Click Me
    {{/Surface}}
</template>

在您看来（使用 coffeescript）

Template.appMainView.rendered = ->
    mainContext = FView.byId 'mainCtx'
    mainContext.context.setPerspective 1000
    # transitionable object
    angleDegrees = new Famous.Transitionable -60

    isToggled = off
    defaultDegrees = angleDegrees.get()
    degreesToRadians = 0.0174533
    flag = off

    # red box code
    redBox = FView.byId 'redbox'
    redBoxSurface = redBox.surface
    redBoxModifier = redBox.modifier

    redBoxSurface.on 'click', =>
        if isToggled is on
            targetAngle = defaultDegrees
        else
            targetAngle = -defaultDegrees
        if angleDegrees.isActive()
            angleDegrees.halt()
        angleDegrees.set targetAngle, { duration: 2000, curve: 'easeInOut'}, =>
            console.log 'Transition completed!'
        isToggled = !isToggled

    redBoxModifier.transformFrom =>
        return Famous.Transform.rotateY angleDegrees.get() * degreesToRadians

参见 http://www.tutas-labs.com/coding-lesson-2-animating-surfaces-using-the-transitionable/

中的教程

如何在 Meteor 中为 famo.us 表面设置动画

How to animate famo.us surface in Meteor

meteor

famo.us