1
私はAngular2でタイプライターエフェクトを作成しようとしていました。角型のタイプライターエフェクト
私の質問は基本的に何が最善の方法です。私がこれを行うことができた唯一の方法は、CSSのアニメーションによるものです。これは私にまだ望ましい結果を与えていない。私はこれまでに3つのアプローチを試みました。
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");
このスクリプトは、nullを返すgetElementByIdを使用します。その後、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();
最後に、私が思うアプローチは、「角度」が意図したものです。しかし私はそれを得ることができていない。つまり、typerwiterコードはコンポーネントtsファイルにあります。あるいは、指示によるかもしれません。 'すべての有効なjavascriptコード'もtypescriptで動作するはずなので、私はちょうどjavascriptをコピーしました。まだ何もありません。
Angular2アプローチ
これは私が作成したコンポーネントファイルです。 Angular 2を理解している間に、私もtypecriptをそれほど新しいものにしています。これは、タイプライター機能で参照エラーを出します。テンプレートの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 { }