Angular 2 中的打字机效果

Question

我一直在尝试在 Angular2 中创建打字机效果。

我的问题基本上是什么是最好的方法。我能够做到这一点的唯一方法是通过 CSS 动画。这还没有给我想要的结果。到目前为止，我已经尝试了三种方法。

CSS 方法

创建了一个带有单独样式表的组件。

@import url(http://fonts.googleapis.com/css?family=Anonymous+Pro);

.typewriter h2 {
    margin: 0 auto;
    border-right: .15em solid white;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);
    animation: typewriter 2.5s steps(28) 1s 1 normal both,
             blinkTextCursor 500ms steps(28) infinite normal;
}

@keyframes typewriter{
  from { width: 0 }
  to { width: 100% }
}

@keyframes blinkTextCursor{
  from{border-right-color: rgba(255,255,255,.75);}
  to{border-right-color: transparent;}
}

#typewriterbox {
  display: inline-block;
}

接下来是将在其中添加组件的 HTML。

<div class="page-title">
    <animated-typing>CSS Typewriter effect</animated-typing>
</div>

和组件文件：

import {Component} from '@angular/core'

@Component({
  moduleId: module.id,
  selector : 'animated-typing',
  styleUrls: ['animated-typing.component.css'],
  template: `<div id="typewriterbox" class="typewriter"><h2><ng-content></ng-content></h2></div>`
})

export class AnimatedTypingComponent {}

然后我尝试了另外两种方法，这两种方法都不起作用。这基本上只是意味着向我的 index.html 添加一个脚本。

Javascript 方法

这是我从 codepen 得到的一些打字机代码。http://codepen.io/gavra/pen/tEpzn

这部分在获取 HTML 时失败。

var destination = document.getElementById("typedtext");

该脚本使用 getElementById，它返回 null。然后在尝试设置 destination.value 时中断。从我到目前为止所了解的情况来看，这不是要走的路，但我想看看是否有可能。

<script type="text/javascript" src="js/test.js"></script>

// set up text to print, each item in array is new line
var aText = new Array(
"There are only 10 types of people in the world:", 
"Those who understand binary, and those who don't"
);
var iSpeed = 100; // time delay of print out
var iIndex = 0; // start printing array at this posision
var iArrLength = aText[0].length; // the length of the text array
var iScrollAt = 20; // start scrolling up at this many lines

var iTextPos = 0; // initialise text position
var sContents = ''; // initialise contents variable
var iRow; // initialise current row

function typewriter()
{
 sContents =  ' ';
 iRow = Math.max(0, iIndex-iScrollAt);
 var destination = document.getElementById("typedtext");

 while ( iRow < iIndex ) {
  sContents += aText[iRow++] + '<br />';
 }
 destination.innerHTML = sContents + aText[iIndex].substring(0, iTextPos) + "_";
 if ( iTextPos++ == iArrLength ) {
  iTextPos = 0;
  iIndex++;
  if ( iIndex != aText.length ) {
   iArrLength = aText[iIndex].length;
   setTimeout("typewriter()", 500);
  }
 } else {
  setTimeout("typewriter()", iSpeed);
 }
}


typewriter();

最后，我认为这是“Angular”想要的方法。但是，我无法使其正常工作。这意味着“typerwiter”代码位于组件 ts 文件中。或者也许通过指令。由于“所有有效的 javascript 代码”也应该在打字稿中工作，我只是复制了 javascript。不过还没有。

Angular2 方法

这是我创建的组件文件。在弄清楚 Angular 2 的同时，我也在学习打字稿，这也是新的。它给出了打字机功能的参考错误。模板中的 HTML 部分保持不变。

import {Component} from '@angular/core';

@Component({
  moduleId: module.id,
  selector : 'animated-typing',
  template: `<div><h2><ng-content></ng-content></h2></div>`,
  host: {
    'id':'typedtext'
  }
})

export class AnimatedTypingComponent {

  constructor(){
    typewriter();
  }

}

function typewriter()
{
  // set up text to print, each item in array is new line
  var aText = new Array(
  "I",
  "Love",
  "to",
  "Code."
  );
  var iSpeed = 100; // time delay of print out
  var iIndex = 0; // start printing array at this posision
  var iArrLength = aText[0].length; // the length of the text array
  var iScrollAt = 20; // start scrolling up at this many lines

  var iTextPos = 0; // initialise text position
  var sContents = ''; // initialise contents variable
  var iRow; // initialise current row
  sContents =  ' ';
  iRow = Math.max(0, iIndex-iScrollAt);

  var destination = document.getElementById("typedtext");

  while ( iRow < iIndex ) {
  sContents += aText[iRow++] + '<br />';
  }
  destination.innerText = sContents + aText[iIndex].substring(0, iTextPos) + "_";
  if ( iTextPos++ == iArrLength ) {
  iTextPos = 0;
  iIndex++;
  if ( iIndex != aText.length ) {
   iArrLength = aText[iIndex].length;
   setTimeout("typewriter()", 500);
  }
  } else {
  setTimeout("typewriter()", iSpeed);
  }
}

最后，我添加了 app.module.ts 以进行很好的衡量。组件导入的位置：

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { AppComponent }  from './app.component';
import { AnimatedTypingComponent } from './components/features/animated-typing.component';

@NgModule({
  imports:      [ BrowserModule, HttpModule ],
  declarations: [ AppComponent, AnimatedTypingComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

Answer 1

我最近为我的网站实现了这个。这是我如何做到的：

1. 创建以下两个变量：

   private typewriter_text: string = "Thank you for your interest";
   private typewriter_display: string = "";
   

2. 创建一个连续的自调用函数：

   typingCallback(that) {
     let total_length = that.typewriter_text.length;
     let current_length = that.typewriter_display.length;
     if (current_length < total_length) {
       that.typewriter_display += that.typewriter_text[current_length];
       setTimeout(that.typingCallback, 100, that);
     } else {
       that.typewriter_display = "";
     }
   }
   

3. 在 angular2 ngOnInit() 中调用自调用函数来启动它：

   ngOnInit() {
     this.typingCallback(this);
   }
   

4. 以下内容必须出现在您的 HTML 中的某处

   {{typewriter_display }}