[Opera]twicliを気持ち悪くする

Operaのパネルにtwicliを表示

Twitterのクライアントでsimaも気に入ってるtwicli

最近は、Operaのパネルにローカルに置いたtwicliをほぼ常に表示してるので更新しやすくなって、Twitterの楽しさが分かってきたような気がする。

実際にOperaのパネルに表示させると、この画像のようになるよ。これを見て気になった人(特にOpera使いの人で)は試してみるといいかもね。

…で最近、そんなtwicliの主にCSS関係を自分仕様に改造していたんだけど、その際にちょっとだけ遊んでみたことをせっかくなので記事にしてみる。

前置き長いなw

まぁどんな風に遊んだかというと、twicliのアニメーションを計算してる部分をちょっとずつ変えてみたってだけ。それだけ。

はっきり言って、この記事ネタなのでそこんとこ注意ですよ、と。

アニメーションのデモ

で、twicliのアニメーションが実際にどんな感じで動くか、無駄にデモをつくってみた。うん、ホント無駄だな。…い、いいんだよ、JavaScriptの勉強になったから。

デモ1: デフォルトな動作

// 新規twitの出現アニメーション処理
function animate(elem, max, start) {
  var t = (new Date).getTime();
  if (start+1000 <= t)
    return elem.style.maxHeight = 'none';
  elem.style.maxHeight = Math.ceil(max*(1-Math.cos((t-start)/1000*Math.PI))/2);
  setTimeout(function(){animate(elem, max, start)}, 20);
}

アニメーションのデモ1: デフォルトな動作

やっぱり、デフォルトの動作はきちんと考えてあるなぁ。動き始めと終わりがゆっくりになる感じ。

デモ2: 直線な動作

// 新規twitの出現アニメーション処理
function animate(elem, max, start) {
  var t = (new Date).getTime();
  if (start+1000 <= t)
    return elem.style.maxHeight = 'none';
  elem.style.maxHeight = Math.ceil(max*(t-start)/1000);
  setTimeout(function(){animate(elem, max, start)}, 20);
}

アニメーションのデモ2: 直線な動作

きちんと考えてあるヤツをわざわざ等速に。

デモ3: 放物線な動作

// 新規twitの出現アニメーション処理
function animate(elem, max, start) {
  var t = (new Date).getTime();
  if (start+1000 <= t)
    return elem.style.maxHeight = 'none';
  elem.style.maxHeight = Math.ceil(max*Math.pow((t-start)/1000,2));
  setTimeout(function(){animate(elem, max, start)}, 20);
}

アニメーションのデモ3: 放物線な動作

徐々に加速。

デモ4: ぶるぶるな動作

// 新規twitの出現アニメーション処理
function animate(elem, max, start) {
  var t = (new Date).getTime();
  if (start+3000 <= t)
    return elem.style.maxHeight = 'none';
  elem.style.maxHeight = Math.ceil(max*(function(x){return x+(Math.sin(5*2*x*Math.PI))/10;})((t-start)/3000));
  setTimeout(function(){animate(elem, max, start)}, 20);
}

アニメーションのデモ4: ぶるぶるな動作

波打っちゃう。

デモ5: ぐわんぐわんな動作

// 新規twitの出現アニメーション処理
function animate(elem, max, start) {
  var t = (new Date).getTime();
  if (start+3000 <= t)
    return elem.style.maxHeight = 'none';
  elem.style.maxHeight = Math.ceil(max*(function(x){return x*((1+Math.sin(3*3*x*Math.PI-Math.PI/2))/2);})((t-start)/3000));
  setTimeout(function(){animate(elem, max, start)}, 20);
}

アニメーションのデモ5: ぐわんぐわんな動作

じ、地震?

デモ6: らんだむなどーさ

// 新規twitの出現アニメーション処理
function animate(elem, max, start) {
  var t = (new Date).getTime();
  if (start+5000 <= t)
    return elem.style.maxHeight = 'none';
  elem.style.maxHeight = Math.ceil(max*Math.random());
  setTimeout(function(){animate(elem, max, start)}, 20);
}

なんじゃこりゃw

まとめ

まぁ、見ての通り、紛う事なきネタですね、ハイ。

作者さん自らコメントを頂いたので対応する箇所をちょっとだけ修正。といっても記事中の50だったとこを20に変えただけだけどね。

twicliを気持ち悪くするへのコメント一覧

simaのコメント

どもども。そう言ってもらえると嬉しいです。

NeoCatのコメント

あははw なかなか楽しいですね。ちなみに最近、setTimeoutの時間を短く(50→20)してちょっとだけスムーズになりました。

simaのコメント

記事中の50だった箇所も20に変更しました。
ところで、twicliはホントに気に入っていて、これを使い始めてからやっとTwitterのおもしろさが分かりました。Operaとの親和性が高く、このようなクライアントをつくって頂き感謝感謝です。
コメントありがとうございましたー。

twicliを気持ち悪くするへのコメントを書く

コメント : 4件

twicliを気持ち悪くするへの言及をする

埋め込みリンクタグ
<a target="_blank" href="http://f-u.seesaa.net/article/118482725.html">twicliを気持ち悪くする : full of universe</a>
トラックバック URL
http://blog.seesaa.jp/tb/118482725
承認したトラックバックのみ表示される

トラックバック : 0件

プロフィール

sima

ガジェット大好き。おもしろアイテム大好き。いろいろとまぁ物欲を刺激するモノが多いけど、なかなか手に入れることができないでいる。いつかは自分の部屋を、自分が気に入ったモノだけで埋め尽くしたいものだなぁ。…あっ、これ将来の夢ね。

Twitter はフォロー大歓迎なのでよろしく。よく蚊と戦ってるよ。

最新記事

  1. OpeTumblr の Opera Extensions (拡張機能) 版を密かに公開 (05月25日)
  2. シカ成分を補充したら幸せになった (04月24日)
  3. ブログを(内部的にガッツリと)リニューアルしてみた (12月10日)
  4. 補完モードを開始するマッピングを書く (10月25日)
  5. アボカドを育ててみた…かった (07月23日)
  6. 正規表現クロスワードを完全クリアしてみた (07月19日)
  7. Gmail バックアップソフトの Gmvault が動かないときの解決法 (07月14日)
  8. Google アカウントが消える前に! Gmail フルバックアップのススメ (06月30日)
  9. 厳選して使っているポイントサイト2つ (03月27日)
  10. Tumblr で画像を Lightbox 表示!(しかも何も導入せずに) (03月21日)

カテゴリ

アーカイブ

コメント

Gmail バックアップソフトの Gmvault が動かないときの解決法
dsfds (03月31日)
OpeTumblr の Opera Extensions (拡張機能) 版を密かに公開
sima (06月26日)
you (11月30日)
you (11月30日)
sima (10月28日)
HTML ソースの改行を半角スペースにしない方法
ok (06月21日)
sima (05月28日)
edvakf (05月28日)
英数字・記号を並べてみる
ふぁ (11月25日)
コメハチ (11月02日)
OperaでもっとTumblrる!(OpeTumblrをまたまた改良)
you (05月09日)
sima (05月07日)
you (05月04日)
chikuwa (12月12日)

トラックバック

20代で知っておくべき週番号のこと
full of universe (05月16日)
UKTenkiを自動巡回させてみる(MortScript)
なんとなくすばらしい日々の戯れ言 (01月31日)
新着メールを一気に開くMortScriptを改良!
PDAと私生活 (11月07日)
PDAと私生活 (11月02日)
コイツはすごい!Windows Live Writerでブログ投稿をラクラクに
シーサーイーサー (10月31日)
Willcom03で新着メールを一気に開く!(MortScript)
PDAと私生活 (10月10日)

のカレンダー