diff options
| -rw-r--r-- | src/client/views/nodes/trails/PresBox.tsx | 71 | ||||
| -rw-r--r-- | src/client/views/nodes/trails/SlideEffect.tsx | 1 |
2 files changed, 45 insertions, 27 deletions
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx index 67f787b1e..d6bfda54f 100644 --- a/src/client/views/nodes/trails/PresBox.tsx +++ b/src/client/views/nodes/trails/PresBox.tsx @@ -129,30 +129,30 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { @observable isLoading: boolean = false; @observable generatedAnimations: AnimationSettings[] = [ - { - effect: PresEffect.Bounce, - stiffness: 400, - damping: 15, - mass: 1, - }, - { - effect: PresEffect.Fade, - stiffness: 100, - damping: 15, - mass: 1, - }, - { - effect: PresEffect.Flip, - stiffness: 100, - damping: 15, - mass: 1, - }, - { - effect: PresEffect.Roll, - stiffness: 100, - damping: 15, - mass: 1, - }, + // { + // effect: PresEffect.Bounce, + // stiffness: 400, + // damping: 15, + // mass: 1, + // }, + // { + // effect: PresEffect.Fade, + // stiffness: 100, + // damping: 15, + // mass: 1, + // }, + // { + // effect: PresEffect.Flip, + // stiffness: 100, + // damping: 15, + // mass: 1, + // }, + // { + // effect: PresEffect.Roll, + // stiffness: 100, + // damping: 15, + // mass: 1, + // }, ]; @action @@ -2287,7 +2287,26 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { </div> {/* Preview Animations */} <div> - <div className="presBox-effect-row"> + {this.generatedAnimations.map((elem, i) => ( + <div + key={i} + className="presBox-effect-container" + onClick={() => { + this.updateEffect(elem.effect, false); + this.updateEffectTiming(this.activeItem, { + type: SpringType.CUSTOM, + stiffness: elem.stiffness, + damping: elem.damping, + mass: elem.mass, + }); + }}> + <SlideEffect dir={PresEffectDirection.Left as PresEffectDirection} presEffect={elem.effect as PresEffect} tension={elem.stiffness} friction={elem.damping} mass={elem.mass} infinite> + <div className="presBox-effect-demo-box" style={{ top: elem.effect === PresEffect.Flip ? 0 : '20px', left: elem.effect === PresEffect.Flip ? 0 : '20px', backgroundColor: '#ff2599' }}></div> + </SlideEffect> + </div> + ))} + + {/* <div className="presBox-effect-row"> <div className="presBox-effect-container"> <SlideEffect key={JSON.stringify(this.generatedAnimations[0])} @@ -2346,7 +2365,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { style={{ top: this.generatedAnimations[3].effect === PresEffect.Flip ? 0 : '20px', left: this.generatedAnimations[3].effect === PresEffect.Flip ? 0 : '20px', backgroundColor: '#ff2599' }}></div> </SlideEffect> </div> - </div> + </div> */} </div> </div> {/* Effect direction */} diff --git a/src/client/views/nodes/trails/SlideEffect.tsx b/src/client/views/nodes/trails/SlideEffect.tsx index 251649d6a..5cb4da72c 100644 --- a/src/client/views/nodes/trails/SlideEffect.tsx +++ b/src/client/views/nodes/trails/SlideEffect.tsx @@ -166,7 +166,6 @@ export default function SpringAnimation({ doc, dir, friction, tension, mass, pre }, }, ], - loop: true, }; const flipConfig = { |