Question

我正在使用流星的着名景观包，我喜欢它。我创建了一个简单的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表面设置动画

1 个答案: