iOSはカードスタック効果を実現します。


本論文の例では、iOSのカードスタック効果を実現するための具体的なコードを共有します。

図のように、これが最終効果です。
去年Android 5.0が発表された時、Androidの新しいMaterial Designのデザイン言語を見てから、本当に好きでたまらないです。このデザイン言語は偏平式のデザインとカード式のデザインと違っています。シンプルで、自然です。15年の初めまで、偶然にもCMチームがAndroid 5.0に基づくROMをたくさんリリースしているのを見ました。ちょうど私の携帯電話の対応バージョンがあって、待ちきれないほどファームウェアを磨きました。
言わなければならないのは、Androidのこのバージョンはまるで歴史的な変革で、もっと流暢で、使いやすいです。そして、開発者モードでは、このバージョンはDalvikモードを削除しました。全部ARTモードを採用しました。でも、使いやすいです。
そして、私が好きなところをいくつか教えてください。
1.バックグラウンドのタスクマネージャのスタイル、カードの積み重ねの効果、初めて見たこの感覚はクールダウンしました。携帯にこんなにかっこいい効果が現れるとは思ってもいませんでした。アップルは一年後に9.0システムのバックグラウンド管理インターフェイスもこのデザインを使っています。横スクロールだけです。大文字のほほほを言いたいです。
2.没頭式のデザイン、えっと、これはリンゴのデザインをパクリした疑いがありますが、リンゴよりもっと綺麗でシンプルだと思います。4.4バージョンではステータスバーを透明に設定できますが、私が作ったものは時々不透明度が50%ぐらいの黒いレイヤーを被ります。
3.メッセージ、カレンダーの右下のあのプラス記号。何もなさそうですが、それはちょっと目を凝らしたペンの意味があります。各ページの色の組み合わせがとても綺麗です。あのプラスの色も点眼色です。見たところとても楽で、紙の読書の感じがあります。
4.影が長い。多くは言いません。目で見た大きなアプリのiconはこれを採用しました。
考え方
scrollviewのコンテンツビューのオフセットを利用して、各viewの位置を計算し、iOSのスクロールビューを上と底に引き続ける時のその効果を利用して、境界を完成させる効果です。
実は数本の公式だけで済みました。
コアコード

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{

 [self.viewArr enumerateObjectsUsingBlock:^(UIView * view, NSUInteger idx, BOOL *stop) {

 NSInteger value = self.distance;

 /*************    ***************/
 CGRect rect = view.frame;
 //view    
 NSInteger min_y = self.top + value*idx;
 rect.origin.y = min_y - (scrollView.contentOffset.y);

 //view     
 if (scrollView.contentOffset.y >= value*idx-value*pow(2.0, idx)/pow(2.0, self.dataArr.count)){
  rect.origin.y = self.top+value*pow(2.0, idx)/pow(2.0, self.dataArr.count);
 }
 if (scrollView.contentOffset.y > scrollView.contentSize.height- SCREEN_HEIGTH) {
  rect.origin.y = rect.origin.y -(scrollView.contentOffset.y -(scrollView.contentSize.height-SCREEN_HEIGTH));
 }
 view.frame = rect;

 /*************    ***************/
 CGFloat scale = 0.60;
 scale = (rect.origin.y*0.75 +60)/1000+scale >=0.9?0.9:(rect.origin.y*0.75 +50)/1000+scale;
 view.layer.transform = CATransform3DMakeScale(scale, scale, 1);
 }];
}
[git ソース
1.UITable Viewと同じように使う。
2.インターフェースの機能を詳しく見ると、どうやって使うか分かります。
3.多重化が実現されました。
4.続きはずっと完璧です。
5.コードがお役に立てれば幸いです。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。