Angular 5 не может использовать файл анимации GreenSock - PullRequest
Новая
       14

Angular 5 не может использовать файл анимации GreenSock

0 голосов
/ 04 мая 2018

У меня есть приложение Angular 5, в котором я сейчас реализую анимацию прокрутки, используя библиотеку GreenSock.js, а также ScrollMagic.js. Один действительно важный файл по какой-то причине он не позволит мне включить в проект без ошибок под названием 

scrollmagic/scrollmagic/minified/plugins/animation.gsap.min.js

Когда я пытаюсь импортировать этот файл в проект, я получаю список ошибок- 

./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js
Module not found: Error: Can't resolve 'TimelineMax' in '/Users/RyanIndustries8/Documents/Projects/WebSites/megakyle83/node_modules/scrollmagic/scrollmagic/uncompressed/plugins'
 @ ./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js 31:2-61
 @ ./src/app/home/home.component.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi ./node_modules/webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts
errors @ client:167
onmessage @ socket.js:41
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:883
SockJS._transportMessage @ sockjs.js:881
EventEmitter.emit @ sockjs.js:86
WebSocketTransport.ws.onmessage @ sockjs.js:2957
wrapFn @ zone.js:1166
ZoneDelegate.invokeTask @ zone.js:421
Zone.runTask @ zone.js:188
ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1517
globalZoneAwareCallback @ zone.js:1543
client:167 

./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js
    Module not found: Error: Can't resolve 'TweenMax' in '/Users/RyanIndustries8/Documents/Projects/WebSites/megakyle83/node_modules/scrollmagic/scrollmagic/uncompressed/plugins'
     @ ./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js 31:2-61
     @ ./src/app/home/home.component.ts
     @ ./src/app/app.module.ts
     @ ./src/main.ts
     @ multi ./node_modules/webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

Uncaught ReferenceError: tween is not defined
    at HTMLDocument.eval (home.component.ts:34)
    at l (scripts.bundle.js:2)
    at c (scripts.bundle.js:2)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Zone.runTask (zone.js:188)
    at ZoneTask.invokeTask (zone.js:496)
    at ZoneTask.invoke (zone.js:485)
    at timer (zone.js:2025)

Это то, что у меня есть в моем файле component.ts- 

import { Component, OnInit, Injectable } from '@angular/core';
import { Router } from '@angular/router';
import * as $ from 'jquery';
import { TweenMax, TimelineMax, ScrollToPlugin } from 'gsap';
import * as ScrollMagic from 'ScrollMagic';
import 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap';
import 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators';

declare var $:any;
declare var TweenMax: any;
declare var TimelineMax: any;
declare var tween: any;

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  // intro: object [];

  constructor(private router: Router) {

  }

public  ngOnInit() {
    $(document).ready(function() {
      //Init Scroll Magic
      var controller = new ScrollMagic.Controller();

      var scrollScene = new ScrollMagic.Scene({
        triggerElement: 'a.leanArrow',
        triggerHook: "onLeave"
      })
      .setTween()
      .addIndicators({
        name: 'fade scene',
        colorTrigger: 'orange',
        colorStart: '#0000ff'
      })
      .addTo(controller);

      controller.scrollTo(function (newpos){
        TweenMax.to(window, 0.5, {scrollTo: {y: newpos}});
      });

      $(document).on("click", "a[href^='#']", function(e) {
        var id = $(this).attr("href");
        if($(id).length > 0) {
          e.preventDefault();

          controller.scrollTo(id);

          if (window.history && window.history.pushState) {
            history.pushState(", document.title, id");
          }
        }
      });

    //loop through each img
    $('img').each(function() {
    //build scene
    var ourScene = new ScrollMagic.Scene({
    triggerElement: this,
    triggerHook: 0.6
  })

  .setClassToggle(this, 'fade-in')
  .addIndicators({
    name: 'fade scene',
    colorTrigger: 'black',
    colorStart: '#ff0000'
  })
  .addTo(controller);
  });

    //Manage animatedMenu
    var animatedMenu = new ScrollMagic.Scene({
    triggerElement: 'section',
    triggerHook: 0.1
  })

  .setClassToggle('#animatedMenu', 'fade-in')
  .addIndicators({
    name: 'menu scene',
    colorTrigger: 'purple',
    colorStart: '#00ff00'
  })
  .addTo(controller);
}
}

Кто-нибудь знает, как решить эту проблему с помощью файла animation.gsap.js в Angular?

1 Ответ

0 голосов
/ 07 декабря 2018

Поздно к игре, но в последнее время у меня возникла та же проблема и решения, которые я нашел, либо требовал извлечения приложения, либо не работал.

Это то, что сработало для меня, основываясь на нескольких собранных вместе ответах.

Если вы уже установили модули узлов gsap и scrollmagic:

  1. Установить импорт-загрузчик и набрать / greensock 

    npm install imports-loader @types/greensock --save

  2. В файле tsconfig.app.json убедитесь, что greensock находится в массиве типов объекта компилятора: 

    "types": [
  "node", "greensock"
]

  3. В модулях, где требуется scrollmagic + gsap, используйте следующую декларацию импорта: 

    import 'imports-loader?define=>false!scrollmagic/scrollmagic/minified/plugins/animation.gsap.min.js';
import { TimelineMax} from 'gsap';
import * as ScrollMagic from 'scrollmagic';
...