How to use the konva.Easings function in konva

To help you get started, we’ve selected a few konva examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Zamiell / hanabi-live / public / js / src / game / ui / drawUI.ts View on Github external
shadowOpacity: 0.9,
        visible: false,
        listening: true,
    });
    globals.layers.get('UI')!.add(sharedReplayLeaderLabel);
    globals.elements.sharedReplayLeaderLabel = sharedReplayLeaderLabel;

    // Add an animation to alert everyone when shared replay leadership has been transfered
    globals.elements.sharedReplayLeaderLabelPulse = new Konva.Tween({
        node: sharedReplayLeaderLabel,
        width: size * 2,
        height: size * 2,
        offsetX: 0.025 * winH,
        offsetY: 0.025 * winH,
        duration: 0.5,
        easing: Konva.Easings.EaseInOut,
        onFinish: () => {
            if (globals.elements.sharedReplayLeaderLabelPulse) {
                globals.elements.sharedReplayLeaderLabelPulse.reverse();
            }
        },
    });
    globals.elements.sharedReplayLeaderLabelPulse.anim.addLayer(globals.layers.get('UI'));

    // Tooltip for the crown
    sharedReplayLeaderLabel.tooltipName = 'leader';
    // This will get filled in later by the "replayLeader" command
    sharedReplayLeaderLabel.tooltipContent = '';
    tooltips.init(sharedReplayLeaderLabel, false, true);

    // The user can right-click on the crown to pass the replay leader to an arbitrary person
    sharedReplayLeaderLabel.on('click', (event) => {
github Zamiell / hanabi-live / public / js / src / game / ui / arrows.ts View on Github external
arrow.show();

    // Start the arrow at the center position of the clue giver's hand
    const centerPos = globals.elements.playerHands[giver].getAbsoluteCenterPos();
    arrow.setAbsolutePosition(centerPos);

    // Calculate the position of the final arrow destination
    // (this must be done after the card is finished tweening)
    const pos = getPos(card, rot);

    new Konva.Tween({
        node: arrow,
        duration: 0.5,
        x: pos.x,
        y: pos.y,
        easing: Konva.Easings.EaseOut,
    }).play();
};
github Zamiell / hanabi-live / public / js / src / game / ui / drawCurrentPlayerArea.js View on Github external
if (globals.elements.currentPlayerArrowTween) {
                globals.elements.currentPlayerArrowTween.destroy();
            }

            // We want the arrow to always be moving clockwise
            const oldRotation = globals.elements.currentPlayerArrow.rotation();
            const unmodifiedRotation = rotation;
            if (oldRotation > rotation) {
                rotation += 360;
            }

            globals.elements.currentPlayerArrowTween = new Konva.Tween({
                node: globals.elements.currentPlayerArrow,
                duration: 0.75,
                rotation,
                easing: Konva.Easings.EaseInOut,
                onFinish: () => {
                    if (globals.elements.currentPlayerArrow) {
                        globals.elements.currentPlayerArrow.rotation(unmodifiedRotation);
                    }
                },
            }).play();
        }
    };
};
github Zamiell / hanabi-live / public / js / src / game / ui / PlayStack.ts View on Github external
} else {
                // Animate the card leaving the hand to the play stacks
                // (tweening from the hand to the discard pile is handled in
                // the "CardLayout" object)
                const card = node.children[0];
                card.tweening = true;
                node.tween = new Konva.Tween({
                    node,
                    duration: 0.8,
                    x: 0,
                    y: 0,
                    scaleX: scale,
                    scaleY: scale,
                    rotation: 0,
                    opacity,
                    easing: Konva.Easings.EaseOut,
                    onFinish: () => {
                        if (!node || !card || !card.parent) {
                            return;
                        }
                        if (card.isMisplayed && card.parent.parent) {
                            // If the card is misplayed, then tween it to the discard pile
                            // We check for "card.parent.parent" to fix the bug where
                            // the tween will still finish if the user goes backward in a replay
                            card.removeFromParent();
                            card.animateToDiscardPile();
                        } else {
                            card.tweening = false;
                            node.checkSetDraggable();
                            this.hideUnder();
                        }
                    },
github Zamiell / hanabi-live / public / js / src / game / ui / Deck.ts View on Github external
this.draggable(false);
            globals.elements.deckPlayAvailableLabel!.hide();

            globals.lobby.conn.send('action', {
                type: ACTION.DECKPLAY,
            });

            action.stop();
        } else {
            // The deck was dragged to an invalid location, so animate the card back to where it was
            new Konva.Tween({
                node: this,
                duration: 0.5,
                x: 0,
                y: 0,
                easing: Konva.Easings.EaseOut,
                onFinish: () => {
                    const layer = globals.layers.get('UI');
                    if (typeof layer !== 'undefined') {
                        layer.batchDraw();
                    }
                },
            }).play();
        }
    }
github Zamiell / hanabi-live / public / js / src / game / ui / CardLayout.ts View on Github external
const card = node.children[0] as unknown as HanabiCard;
                card.tweening = true;
                if (card.doMisplayAnimation) {
                    // If this card just misplayed, do a special animation
                    card.doMisplayAnimation = false;
                    node.rotation(360);
                }
                node.tween = new Konva.Tween({
                    node,
                    duration: 0.5,
                    x: newX,
                    y: 0,
                    scaleX: scale,
                    scaleY: scale,
                    rotation: 0,
                    easing: Konva.Easings.EaseOut,
                    onFinish: () => {
                        if (!card || !node) {
                            return;
                        }
                        card.tweening = false;
                        node.checkSetDraggable();
                        if (!storedPostAnimationLayout) {
                            return;
                        }
                        storedPostAnimationLayout();
                    },
                }).play();
            }

            x += ((scale * node.width()) + dist) * (this.reverse ? -1 : 1);
        }
github drakang4 / jamak / src / renderer / components / Block / Transformer.tsx View on Github external
fadeInRect = () => {
    const { theme } = this.props;

    this.rect.current!.to({
      fill: theme.pallete.primary[4],
      duration: 0.2,
      easing: Konva.Easings.EaseOut,
    });
  };
github Zamiell / hanabi-live / public / js / src / game / ui / replay.ts View on Github external
shuttle.x(x);
        shuttle.y(y);
        shuttle.scaleX(scale);
        shuttle.scaleY(scale);
    } else {
        if (shuttle.tween) {
            shuttle.tween.destroy();
        }
        shuttle.tween = new Konva.Tween({
            x,
            y,
            scaleX: scale,
            scaleY: scale,
            node: shuttle,
            duration: 0.25,
            easing: Konva.Easings.EaseOut,
        }).play();
    }
};
github connect-foundation / 2019-13 / front / src / Components / URLImage / index.js View on Github external
const handleDragEnd = (e) => {
    e.target.to({
      duration: 0.5,
      easing: Konva.Easings.ElasticEaseOut,
      scaleX: 1,
      scaleY: 1,
      shadowOffsetX: 0,
      shadowOffsetY: 0,
    });
    spritesDispatch({
      type: 'DRAG_END',
      key: spritekey,
      value: {
        x: e.target.attrs.x - canvasSize.WIDTH / 2,
        y: e.target.attrs.y - canvasSize.HEIGHT / 2,
      },
    });
  };
  const handleMouseDown = () => {
github drakang4 / jamak / src / renderer / components / Block / Transformer.tsx View on Github external
fadeOutRect = () => {
    this.rect.current!.to({
      fill: 'rgba(0,0,0,0)',
      duration: 0.2,
      easing: Konva.Easings.EaseOut,
    });
  };

konva

<p align="center"> <img src="https://konvajs.org/android-chrome-192x192.png" alt="Konva logo" height="180" /> </p>

MIT
Latest version published 5 days ago

Package Health Score

84 / 100
Full package analysis