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

Question

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

我已经查看了 post：anime.js not working in Ionic 3 project 但是，它确实对我有用。

图像（谁我要动画什么）没有动画。

有人用这个吗？请分享解决方案？

到目前为止我做了什么：

使用 npm 安装 animejs：package.json 更新为："animejs": "^2.2.0"
Animejs 在 node_modules
使用自定义复制库，anime.min.js 加载到 index.html，请参阅：

    const existingConfig = require('../node_modules/@ionic/app-scripts/config/copy.config');
    module.exports = Object.assign（现有配置，{
        copyFontawesomeFonts: {
          来源：['{{ROOT}}/node_modules/font-awesome/fonts/**/*'],
          目的地：'{{WWW}}/assets/fonts'
        },
        copyFontawesomeCss: {
          来源：['{{ROOT}}/node_modules/font-awesome/css/font-awesome.min.css'],
          目的地：'{{WWW}}/assets/css'
        },
        复制AnimeJS：{
          来源：['{{ROOT}}/node_modules/animejs/anime.min.js*'],
          目的地：'{{WWW}}/assets/js'
        },
      }
    );

index.html 看起来像：

...

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

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

...

anime.min.js 在 index.html
我在 login.ts 文件中导入胺，如：

import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; import * as anime from 'animejs'; ...
在构造函数中加载：

动漫({ 目标：'#authImg'，翻译Y：-50，弹力：800，持续时间：2500，方向：'alternate'，缓动：'easeInOutCubic'，循环：真 });
其中必须动画以下html:

<img src="assets/img/auth.png" alt="" id="authImg" />
但是什么也没发生...

Answer 1

我认为您不必 link assets/js/anime.min.js 到您的 index.html 也不用离子应用程序脚本复制 js。

只需导入anime.js如下：

import * as anime from 'animejs';

然后确保在加载视图后设置动画（例如 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
        });

    }

}

Example.html:

<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>

example.scss:

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

Answer 2

如果您是 2020 年的人，请像这样导入

import anime from 'animejs/lib/anime.es';

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

How to setup Anime JS in a Ionic / Angular project?

javascript

ionic3

anime.js