CSSアニメーションの初歩をおさらい
最近はアニメーションをFlashではなく、CSSやJavaScriptで実装されているサイトをよく見るようになりました。 今回は復習も兼ねて、CSSで動きを付けられるanimationとtransitionのおさらいをしてみたいと思います。 ベンダープレフィックスをつけないと動かないブラウザもありますが、省略します。 animationとtransitionの違い どう違うのかなと思って調べたのですが、いまいちわからなかったので、違いを並べてみました。 animation ループ可能 keyframesで細かい設定が可能 ウインドウ読み込んで即実行が可能 transition ループがない 自然に最初の状態に戻る hoverなどのキッカケを与えてあげないと動かない JS使えば違うかもしれないですが、一応こんな印象です。違ったらすみません。 それぞれを翻訳すると、animationはそのまま
Gnuplot道場 Gnuplotでアニメーション
■Gnuplotでアニメーションを描画する ■Gnuplotでgifアニメを作る
Google Sites: Sign-in
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
UIViewで手軽にアニメーションを実行する方法 - プログラミングノート
UIViewにはアニメーション関連メソッドが用意されているので、お手軽にアニメーションを実行することができます。ボタン、ラベル、画像などは全てUIViewを継承しているので基本的に全て同じ方法で実行可能です。 まずはUIViewの初期化メソッドでUIButtonを生成してViewに追加しておきます。このボタンが押されると@selector()で指定してあるメソッドが呼ばれるので、そこでアニメーションを実行します。 - (id)initWithFrame:(CGRect)frame { if (self = [super initWithFrame:frame]) { self.backgroundColor = [UIColor whiteColor]; // button UIButton *btn= [UIButton buttonWithType:UIButtonTypeRounde
[iOS] たった２行でTweenアニメーションを実装できるコードを公開。
先日、こんな記事が話題になっていましたね。 職人が教える！iOSアプリ開発で使いこなしたいとっておきのOSS 第1回 様々なアニメーションを実現するiOSアプリ用トゥイーンライブラリ3種を比較！ 実はTweenという言葉すら初耳だった程度の知識なのですが、この記事を読んでサンプルコードをいじってみました。 ですが、正直どれも使い方が複雑で使いづらいなぁ。。という印象でどうにかならないものかな？と。 もちろん、本格的なTweenを実現するには多少複雑になってしまうのは分かるのですが、実際に使うとなるとそこまでの機能は必要ない場合の方が多いんじゃない？ってのが今回のコードを用意したきっかけ。 そこで、上記記事であげられていたライブラリを参考に、もっと簡単に使えるTweenアニメーション用コードを書いてみましたので、ご参考まで。 ツッコミ大歓迎です！ 今回のコードを使えば、アニメーションしたい所
![[iOS] たった２行でTweenアニメーションを実装できるコードを公開。](https://cdn-ak-scissors.b.st-hatena.com/image/square/b286b32eb7451bce46cf13730cd00b8a5c15d5c1/height=288;version=1;width=512/https%3A%2F%2Fsecure.gravatar.com%2Fblavatar%2Fc6db5e287299371a2e2c1d2a735fcf1a9b853fa57afd52fdfd8189b72dc54794%3Fs%3D240){kind=avatar}
JavaScript アニメーションのデザインパターン
JavaScript でアニメーションを作る アニメーションとは何？ ビューを少しずつ回転、拡大縮小、移動、変色などを行い、連続的な動きを作る こんな感じ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; setInterval(function() { el.style.opacity -= 0.01; }, 10); </script> なんで、あんな感じの書き方になるの？ setInterval の意味が分からない こんな感じで書けないの？ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; w
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
