标签: gsap

我在 React 中使用 TypeScript，TypeScript 仍在检查 node_modules 文件夹中的库，尽管我在 tsconfig.json 中将“skipLibCheck”设置为 true ..

这是我的 tsconfig.json（我添加了排除部分进行故障排除，这也不起作用）：

{
  "compilerOptions": {
    "target": "es5",
    "forceConsistentCasingInFileNames": true,
    "module": "commonjs",
    "jsx": "react",
    "declaration": true,
    "sourceMap": true,
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "typeRoots": [
      "./node_modules/@types"
    ],
    "types": [
      "es6-promise",
      "webpack-env"
    ],
    "lib": [
      "es5",
      "dom",
      "es2015.collection"
    ]
  }, 
  "exclude": [
    "node_modules",
    "./node_modules",
    "./node_modules/*",
    "./node_modules/@types/node/index.d.ts",
  ]
}

我使用的 React 版本是 15.4.2，TypeScript 是全局安装的......我有 3.7.2 版，我将它升级到 3.7.3，因为我在某处读到过 skipLibCheck 不适用于 3.7.2 ..

尝试使用 gulp 构建项目时遇到的错误是：

Error - typescript - node_modules\gsap\types\gsap-utils.d.ts(97,75): error TS1144: '{' or …

要将ScrollMagic与GSAP一起使用,您需要加载animation.gsap.js插件.使用Webpack,您可以执行以下操作(假设您使用CommonJS语法并使用npm安装所有内容):

var TweenMax = require('gsap');
var ScrollMagic = require('scrollmagic');
require('ScrollMagicGSAP');

要确保这实际上有效,您必须为Webpack配置添加别名,以便Webpack知道插件的位置.

resolve: {
  alias: {
    'ScrollMagicGSAP': 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap'
  }
}

不幸的是,当您使用此配置和上面的CommonJS语法时,ScrollMagic会继续抛出错误.

(ScrollMagic.Scene) -> ERROR calling setTween() due to missing Plugin 'animation.gsap'. Please make sure to include plugins/animation.gsap.js

我试图像这样实现mouseOver效果.

我能够根据它们的位置生成每个瓷砖所需的css3d矩阵.

我已经通过慢速鼠标移动实现了这种效果,但是如果我从一个瓷砖快速移动到另一个瓷砖,则它不能正常更新.它在瓷砖之间显示出差距.在鼠标悬停时更新所有tile/tile坐标的最佳方法是什么,以便获得一致的效果？

这是我的js代码:

 $('.box').each(function() {
            $(this).css('height', '284px');
            $(this).css('width', '284px');
        });

        generateGrid = function(w, h) {
            var t = this;
            this.p = [];
            var d = 30;


            var c = Math.floor($('.w').outerWidth() / 284 + 1);
            var r = Math.ceil($('.w').outerHeight() / 284) + 1;
            var vc = c * r;
            for (i = 0; i < vc; i++) {
                var l = {
                    x: Math.floor(i % c) * 284,
                    y: Math.floor(i / c) * 284
                };
                this.p.push(l);
            }
            var m = …

我有一组控制点代表一个高阶贝塞尔曲线.
如何使用单个SVG路径绘制此曲线？

UPD:
例如,我有一组点:(x1,y1)(x2,y2)(x3,y3)(x4,y4)(x5,y5).
如何SVG-路径看起来像的条款C,S,Q或T？

UPD 2:解决方案
我问这个问题描绘了一个用TweenMax动画的对象路径.
后来我收到了GreenSock论坛的回复.
这是CodePen示例.

如何使用 TypeScript将ref添加到React 中的material-ui Box组件中？这对于允许GreenSock / GSAP等动画库对节点进行动画处理非常重要。根据material-ui文档，使用itemRef将不起作用，因为它需要使用findDOMNode，而findDOMNode在严格模式下已被弃用（为并发React做准备），并且由于虚拟DOM渲染，进一步可能会中断。

这是我的测试：

jest.mock('gsap')
import TweenMax from '../../__mocks__/gsap'
import Component from '@/components/Callback/Form.vue'
import { shallow, createLocalVue } from '@vue/test-utils'

const localVue = createLocalVue()

test('phone opacity changing from 1 to 0 in totalTime', () => {
    const wrapper = shallow(Component, {
        localVue,
        mocks: {
            localStorage
        },
        watch: {
            step
        },
        methods: {
            enterNamePlaceholder,
            toNextBtn
        }
    })
    const phone = wrapper.find('.callback__phone')
    expect(TweenMax.to.mock.calls[0][0]).toBe(phone.element)
})

正在测试的代码：

TweenMax.to(document.querySelector('.callback__phone'), this.totalTime, {opacity: 0, onComplete: this.enterNamePlaceholder})

和开玩笑的错误信息：

Expected value to be:
  <a class="callback__phone link" href="tel:88619442620">+7 (861) 944 26 20</a>
Received: …

我正在尝试测试在 TweenMax 动画后更改状态的组件。浏览器上一切正常，但我无法理解如何为其编写测试。

问题是Jest不会等待动画完成，因此状态不会改变。

我也试过jest.runAllTicks()和jest.runAllTimers()

这里的一些代码最终会模拟我正在做的事情：

成分

class HelloWorld extends React.Component {
    constructor(props) {
        super(props);
        this.state = { done: false };
        this.p;
    }

    componentDiDMount() {
        TweenMax.to(ReactDOM.findDOMNOde(this.p), 1, { 
            onComplete: () => {
                this.setState({ done: true })
            }
        })
    }

    renderMessage() {
        if (this.state.done) {
            return "Hello World";
        } else {
            return "Loading...";
        }
    }

    render () {
        return <p ref={p => this.p = p}>{this.renderMessage()}</p>;
    }       
}

测试（基本结构）

describe("test",()=>{
    it("works", ()=>{
        const …

我在 javascript 中创建了一个“60 秒”倒计时器，我试图弄清楚如何使它不“跳跃”。主要问题是字体字符的宽度不一致。我认为解决这个问题的唯一方法是以某种方式将每个字符附加到它自己的 div 中，并通过 css 控制该 div 的宽度。但我不太确定该怎么做。有更好的方法吗？

我知道 Greensock 的“TweenMax”插件可以处理这个问题，但我想自己创建这个，而不是使用库来做一件小事。

jsFiddle：** http://jsfiddle.net/oneeezy/3CreM/1/

HTML：

<div class="row">
    <span class="timer timerback">00:00</span>
    <span id="Timer" class="timer timerfront">60:00</span>
    <span class="seconds">Seconds</span>
</div>

JavaScript：

var count = 6000;
var counter = setInterval(timer, 10);

function timer()
{
    if (count <= 0)
    {
        clearInterval(counter);
        return;
     }
     count--;
     document.getElementById("Timer").innerHTML=count /100;
 }

所以我发现了这个令人惊奇的codepen动画,它通过<text>标签使用(GSAP我想)为任何文本提供"水填充"效果.

Codepen截图如下 点击此处获取CODEPEN

我的问题:我如何使用.PNG图像而不是HTML文本来实现相同的结果？

例如

而不是当前的代码: <text id="text" transform="matrix(1 0 0 1 -8.0684 116.7852)" font-family="'Cabin Condensed'" font-size="161.047">LOADING</text>

我当时希望做更多的事情

<img src="LOADING.png" id="text" transform="matrix(1 0 0 1 -8.0684 116.7852)" width="569" height="186">

加载.PNG IMG的示例可以使用:( 与<img>上面的代码片段相同的尺寸)

谢谢你的帮助!不是最好的这个东西,并希望使用效果!

如果效果更好,这是上面发布的png文件的SVG:imgh.us/loadingpng.svg

我想知道是否有一种方法，以及如何实现，以某种gsap方式固定一个元素，但使用 FRAMER MOTION。为了做类似的事情：

https://codepen.io/hexagoncircle/pen/LYpaPQp

提前致谢 ！