- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
如何在我的 ReactJS 项目中包含 ScrollMagic 的 Greensock 插件?
ScrollMagic 的作者制作了插件来合并 GreenSock 和 Velocity 等库。当您像这样将它们包含在 html 文档的 head 中时,它们会非常有效
<script type="text/javascript" src="js/lib/greensock/TweenMax.min.js"></script>
<script type="text/javascript" src="scrollmagic/uncompressed/ScrollMagic.js"></script>
<script type="text/javascript" src="scrollmagic/uncompressed/plugins/animation.gsap.js"></script>
但是当你使用 ReactJS 时,你不会像这样导入 javascript 资源。实际上,您必须通过 npm 命令之类的过程导入它们,然后在您的 React 项目中声明它们,如
import ScrollMagic from "scrollmagic"
虽然我能够将 ScrollMagic 导入到 React 文件中并开始使用 ScrollMagic,但我无法导入 greensock 插件。没有关于如何执行此操作的文档。我尝试通过在animation.gsap.js中提取代码段并将其粘贴到node_modules/scrollmagic/scrollmagic.js
文件中来破解这些东西(编辑这些文件不是一个好主意),但它要么破坏了 webpack 编译器,要么破坏了我的项目代码。
如何在React环境中使用greensock插件进行scrollmagic?
最佳答案
我能够构建一个包装器。在较高的层面上,我所做的是研究 plugins/animation.gsap.js
的代码,提取我需要的那些场景扩展属性,更改 namespace ,并让它增强ScrollMagic 在导出之前放在单独的 react 类中。
具体来说,我所做的是创建一个名为 ./ScrollMagic.js
的新文件并粘贴以下内容:
import ScrollMagic from 'scrollmagic';
import {TweenLite as Tween,TimelineMax as Timeline} from 'gsap';
ScrollMagic.Scene.addOption("tweenChanges", // name
false, // default
function (val) { // validation callback
return !!val;
});
ScrollMagic.Scene.extend(function () {
var Scene = this,
_tween;
var log = function () {
if (Scene._log) { // not available, when main source minified
Array.prototype.splice.call(arguments, 1, 0, "(animation.gsap)", "->");
Scene._log.apply(this, arguments);
}
};
// set listeners
Scene.on("progress.plugin_gsap", function () {
updateTweenProgress();
});
Scene.on("destroy.plugin_gsap", function (e) {
Scene.removeTween(e.reset);
});
/**
* Update the tween progress to current position.
* @private
*/
var updateTweenProgress = function () {
if (_tween) {
var
progress = Scene.progress(),
state = Scene.state();
if (_tween.repeat && _tween.repeat() === -1) {
// infinite loop, so not in relation to progress
if (state === 'DURING' && _tween.paused()) {
_tween.play();
} else if (state !== 'DURING' && !_tween.paused()) {
_tween.pause();
}
} else if (progress != _tween.progress()) { // do we even need to update the progress?
// no infinite loop - so should we just play or go to a specific point in time?
if (Scene.duration() === 0) {
// play the animation
if (progress > 0) { // play from 0 to 1
_tween.play();
} else { // play from 1 to 0
_tween.reverse();
}
} else {
// go to a specific point in time
if (Scene.tweenChanges() && _tween.tweenTo) {
// go smooth
_tween.tweenTo(progress * _tween.duration());
} else {
// just hard set it
_tween.progress(progress).pause();
}
}
}
}
};
/**
* Add a tween to the scene.
* If you want to add multiple tweens, add them into a GSAP Timeline object and supply it instead (see example below).
*
* If the scene has a duration, the tween's duration will be projected to the scroll distance of the scene, meaning its progress will be synced to scrollbar movement.
* For a scene with a duration of `0`, the tween will be triggered when scrolling forward past the scene's trigger position and reversed, when scrolling back.
* To gain better understanding, check out the [Simple Tweening example](../examples/basic/simple_tweening.html).
*
* Instead of supplying a tween this method can also be used as a shorthand for `TweenMax.to()` (see example below).
* @memberof! animation.GSAP#
*
* @example
* // add a single tween directly
* scene.setTween(TweenMax.to("obj"), 1, {x: 100});
*
* // add a single tween via variable
* var tween = TweenMax.to("obj"), 1, {x: 100};
* scene.setTween(tween);
*
* // add multiple tweens, wrapped in a timeline.
* var timeline = new TimelineMax();
* var tween1 = TweenMax.from("obj1", 1, {x: 100});
* var tween2 = TweenMax.to("obj2", 1, {y: 100});
* timeline
* .add(tween1)
* .add(tween2);
* scene.addTween(timeline);
*
* // short hand to add a TweenMax.to() tween
* scene.setTween("obj3", 0.5, {y: 100});
*
* // short hand to add a TweenMax.to() tween for 1 second
* // this is useful, when the scene has a duration and the tween duration isn't important anyway
* scene.setTween("obj3", {y: 100});
*
* @param {(object|string)} TweenObject - A TweenMax, TweenLite, TimelineMax or TimelineLite object that should be animated in the scene. Can also be a Dom Element or Selector, when using direct tween definition (see examples).
* @param {(number|object)} duration - A duration for the tween, or tween parameters. If an object containing parameters are supplied, a default duration of 1 will be used.
* @param {object} params - The parameters for the tween
* @returns {Scene} Parent object for chaining.
*/
Scene.setTween = function (TweenObject, duration, params) {
var newTween;
if (arguments.length > 1) {
if (arguments.length < 3) {
params = duration;
duration = 1;
}
TweenObject = Tween.to(TweenObject, duration, params);
}
try {
// wrap Tween into a Timeline Object if available to include delay and repeats in the duration and standardize methods.
if (Timeline) {
newTween = new Timeline({
smoothChildTiming: true
}).add(TweenObject);
} else {
newTween = TweenObject;
}
newTween.pause();
} catch (e) {
log(1, "ERROR calling method 'setTween()': Supplied argument is not a valid TweenObject");
return Scene;
}
if (_tween) { // kill old tween?
Scene.removeTween();
}
_tween = newTween;
// some properties need to be transferred it to the wrapper, otherwise they would get lost.
if (TweenObject.repeat && TweenObject.repeat() === -1) { // TweenMax or TimelineMax Object?
_tween.repeat(-1);
_tween.yoyo(TweenObject.yoyo());
}
// Some tween validations and debugging helpers
if (Scene.tweenChanges() && !_tween.tweenTo) {
log(2, "WARNING: tweenChanges will only work if the TimelineMax object is available for ScrollMagic.");
}
// check if there are position tweens defined for the trigger and warn about it :)
if (_tween && Scene.controller() && Scene.triggerElement() && Scene.loglevel() >= 2) { // controller is needed to know scroll direction.
var
triggerTweens = Tween.getTweensOf(Scene.triggerElement()),
vertical = Scene.controller().info("vertical");
triggerTweens.forEach(function (value, index) {
var
tweenvars = value.vars.css || value.vars,
condition = vertical ? (tweenvars.top !== undefined || tweenvars.bottom !== undefined) : (tweenvars.left !== undefined || tweenvars.right !== undefined);
if (condition) {
log(2, "WARNING: Tweening the position of the trigger element affects the scene timing and should be avoided!");
return false;
}
});
}
// warn about tween overwrites, when an element is tweened multiple times
if (parseFloat(TweenLite.version) >= 1.14) { // onOverwrite only present since GSAP v1.14.0
var
list = _tween.getChildren ? _tween.getChildren(true, true, false) : [_tween],
// get all nested tween objects
newCallback = function () {
log(2, "WARNING: tween was overwritten by another. To learn how to avoid this issue see here: https://github.com/janpaepke/ScrollMagic/wiki/WARNING:-tween-was-overwritten-by-another");
};
for (var i = 0, thisTween, oldCallback; i < list.length; i++) { /*jshint loopfunc: true */
thisTween = list[i];
if (oldCallback !== newCallback) { // if tweens is added more than once
oldCallback = thisTween.vars.onOverwrite;
thisTween.vars.onOverwrite = function () {
if (oldCallback) {
oldCallback.apply(this, arguments);
}
newCallback.apply(this, arguments);
};
}
}
}
log(3, "added tween");
updateTweenProgress();
return Scene;
};
/**
* Remove the tween from the scene.
* This will terminate the control of the Scene over the tween.
*
* Using the reset option you can decide if the tween should remain in the current state or be rewound to set the target elements back to the state they were in before the tween was added to the scene.
* @memberof! animation.GSAP#
*
* @example
* // remove the tween from the scene without resetting it
* scene.removeTween();
*
* // remove the tween from the scene and reset it to initial position
* scene.removeTween(true);
*
* @param {boolean} [reset=false] - If `true` the tween will be reset to its initial values.
* @returns {Scene} Parent object for chaining.
*/
Scene.removeTween = function (reset) {
if (_tween) {
if (reset) {
_tween.progress(0).pause();
}
_tween.kill();
_tween = undefined;
log(3, "removed tween (reset: " + (reset ? "true" : "false") + ")");
}
return Scene;
};
});
export default ScrollMagic;
您会注意到,这看起来几乎与 plugins/animation.gsap.js
一模一样,但异常(exception)的是:
plugins/animation.gsap.js
还有一些其他代码可以将插件变成工厂,我排除了这些代码,因为它不适用于此处现在我可以在我的 React 项目中使用 .setTween()
了。用法示例:
import React, {Component} from "react";
import ScrollMagic from "./ScrollMagic"; // my own wrapper for scrollmagic that includes greensock
export default class Home extends Component {
componentDidMount()
{
var controller = new ScrollMagic.Controller();
var item = "#whateverstuffselector";
var scene = new ScrollMagic.Scene({triggerElement:item})
.setTween(item, 0.5, {backgroundColor: "red", scale: 3})
.addTo(controller);
}
render()
{
return (<div id="whateverstuffselector">stuff</div>);
}
}
关于reactjs - 如何在 ReactJS 环境中包含 ScrollMagic 的 GreenSock 插件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47465093/
我对 scrollmagic 很陌生,我希望在整个页面中多次使用单个类来在它进入 View 时进行动画处理。 这可能吗? see pen 欢迎任何指点。 $(function() { cont
我想做的就是在 div 第一次滚动到 View 中时向其添加一个类,然后将其保留在那里。 (所以,我不想切换它 - 只需触发一次)。我有一个基于向父 div 添加类的动画,即使我指定了一个方向,当我在
我正在使用 ScrollMagic 来获取一些滚动动画。问题是我需要使用偏移量,以便动画在滚动的某个点触发,但这完全取决于窗口高度。 所以在我提供的示例中 https://jsfiddle.net/5
我以前使用过 superscrollorama 并开始使用scrollmagic,但我无法设法让一些 div 正确地设置动画。前 2 个 div 很好,但最后两个,一旦我向下滚动,就不会动画。我还想向
我正在尝试固定 ul全尺寸屏幕上的侧边栏,然后取消该图钉并将其更改为父图 nav ul的在半尺寸屏幕上。所以基本上从一个触发器、目标和偏移开始>当屏幕尺寸改变时取消它们>(并)用新的设置固定一个新的选
我正在尝试将图片暂停一段时间。滚动一点后,图片(第 1 部分)应该淡出并显示下面的图片。再滚动一段时间后,两者都应该滚动出来。 我正在使用http://janpaepke.github.io/Scro
我想使用scrollmagic 在我的页面上添加效果。我的滚动场景已定义并且可以工作。现在我希望页面在场景未完成时停止滚动。 我尝试将场景放入带有 overflow-y:scroll; 的容器中,但这
我正在尝试使用 ScrollMagic 的这个特定动画 http://janpaepke.github.io/ScrollMagic/examples/advanced/parallax_sectio
我在需要显示进度条的站点上使用 scrollMagic 库。该栏将显示用户在页面上的位置。进度条的宽度会随着用户向上或向下滚动而改变。我似乎无法让它与 scrollMagic 库一起使用。这是我在其他
我是 ScrollMagic 的新手,所以不确定我是否忽略了一些明显的东西。 我设置了一个 codepen这说明了我正在努力实现的目标,以及一个 alternative version 几乎做我想做的
我是第一次使用 ScrollMagic,据我了解如何根据起始元素和持续时间触发我的动画 是否可以设置结束触发器而不是持续时间? var smcontroller = new ScrollMagic.C
有这样的事情。 https://jsfiddle.net/j6u6wp7x/1/ var scene; var controller; $(document).ready(function() {
我正在试验视差和滚动魔法。在 scrollmagic demo 的视差示例中我正在尝试在第一个视差部分中制作动画内容。 这是 a fiddle of my experiment . 我无法让 #box
在我的网站上,ScrollMagic 场景触发器 Hook 位置存储在一个数组中 slideOffsets = []这是在使用初始化时填充的 var scene; for (var i=0; i元素滚
我正在使用 ScrollMagic 在这之后进行视差部分滚动 tutorial .我让它在视觉上工作,但现在使用鼠标滚轮或触控板时页面已停止滚动。它滚动的唯一方法是拖动右侧的滚动条。 main.c
所以我在构建垂直视差滚动网站时遇到了问题。 目前我正在使用 ScrollMagic 来创建视差部分,并且效果很好。当我尝试将内容放在上面时,问题就来了。对于我的情况,我正在使用 Bootstrap 的
我有一个Scrollmagic问题:我正在使用triggerElement,但它说它在页面顶部进入triggerElement,但triggerElement却在页面中间。这是我的 ScrollMag
我在使用 scrollmagic 时遇到问题,因为我试图在 scrollmagic 中创建自然部分删除的演示,但我遇到了上述问题。看起来我在 querySelector 中出错了,但我不知道我在这里做
我正在使用 ScrollMagic 插件,发现 here 。我在尝试跨多个屏幕尺寸固定对象时遇到问题。问题是我在引脚的“持续时间”属性中进行硬编码,但持续时间设置为像素。由于像素根据您使用的设备而不同
伙计们,我正在使用 scrollmagic 来实现其视差部分删除视差效果。我一直在完全按照发现的方式关注演示 here而且我尝试的任何事情似乎都没有用。这让我发疯我已经在这里待了几个小时了。我在这里遗
我是一名优秀的程序员,十分优秀!