javascript - 如何在Ionic/Angular项目中设置Anime JS？

我喜欢animejs的库形式:https://github.com/juliangarnier/anime它快速，清晰且易于实现，但在Angular项目的Ionic中除外。

我看了一下帖子:anime.js not working in Ionic 3 project，但是它确实对我有用。

图像(我要为其动画的人)没有动画。

有人有这个工作吗？并请分享解决方案？

到目前为止，我所做的是:

用npm安装animejs:package.json更新为:“animejs”:“^ 2.2.0”

可以在node_modules

中使用Anime.js

使用自定义的复制库，将anime.min.js加载到index.html中，请参见:

    const existingConfig = require('../node_modules/@ionic/app-scripts/config/copy.config');
    module.exports = Object.assign(existingConfig, {
        copyFontawesomeFonts: {
          src: ['{{ROOT}}/node_modules/font-awesome/fonts/**/*'],
          dest: '{{WWW}}/assets/fonts'
        },
        copyFontawesomeCss: {
          src: ['{{ROOT}}/node_modules/font-awesome/css/font-awesome.min.css'],
          dest: '{{WWW}}/assets/css'
        },
        copyAnimeJS: {
          src: ['{{ROOT}}/node_modules/animejs/anime.min.js*'],
          dest: '{{WWW}}/assets/js'
        },
      }
    );

The index.html looks like:

...

  <!-- Font-awesome -->
  <link href="assets/css/font-awesome.min.css" rel="stylesheet"/>

  <!-- Anime JS -->
  <link href="assets/js/anime.min.js" rel="stylesheet"/>

...

可以在index.html
我将胺导入我的login.ts文件中，如下所示:
import { Component } from '@angular/core';import { IonicPage, NavController, NavParams } from 'ionic-angular';import * as anime from 'animejs';...
将其加载到构造函数中:

日本动画片({
目标:“＃authImg”，
translateY:-50，
弹性:800
持续时间:2500，
方向:“替代”，
缓动:'easeInOutCubic'，
循环:真
});
必须为以下html设置动画:
<img src="assets/img/auth.png" alt="" id="authImg" />
但是什么也没发生...

最佳答案

我认为您不必将assets/js/anime.min.js链接到index.html，也无需使用ionic应用程序脚本复制js。

只需导入anime.js即可，如下所示:
import * as anime from 'animejs';
然后，确保在加载 View 后设置动画(例如ionViewDidLoad)。

我刚刚运行了这个示例，它运行良好:

Example.ts:

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import * as anime from 'animejs';

@Component({
    selector: 'page-example',
    templateUrl: 'example.html',
})
export class ExamplePage {

    constructor(public navCtrl: NavController, public navParams: NavParams) {
    }

    ionViewDidLoad() {

        anime({
            targets: '#cssSelector .el',
            translateX: 250
        });

    }

}

<ion-header>

    <ion-navbar>
        <ion-title>Example</ion-title>
    </ion-navbar>

</ion-header>


<ion-content padding>

    <div id="cssSelector">
        <div class="line">
            <div class="square el"></div>
        </div>
    </div>

</ion-content>

page-example {
  .square, .circle {
    pointer-events: none;
    position: relative;
    width: 28px;
    height: 28px;
    margin: 1px;
    background-color: currentColor;
    font-size: 12px;
  }
}

关于javascript - 如何在Ionic/Angular项目中设置Anime JS？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47517631/