Food App UI Animation IOS

フードアプリUIアニメーション-iOS

Uplabs / Dribbble / Behanceでデザインを表示します

コア機能

• フードメニューの特徴を表し、あなたの食べ物にお気に入りのトッピングを追加するアニメーションとイラスト
• フードメニュー製品の前および次の矢印アイコンをタップしてアニメーションを見る
• 食べ物にお気に入りのトッピングを追加するアニメーションを表示します

それがどのように機能するか

• ユーザーは食品メニューを選択できます
• 食品メニューをタップした後、すべての食品をアニメーションとイラストで表示します
• 前または次の矢印アイコンをクリックすると、次の食品アイテムがアニメーションとイラストとともに画面に表示されます
• 底の食品に関連する複数のトッピングを見る
• 食べ物を追加したいお気に入りのトッピングをタップします。タップ時に特定のトッピングがアニメーションとイラストであなたの食べ物に追加されます

このコードの目的

• フードアニメーションは、実際の食べ物のイラストを表示します
• アニメーションでユーザーはフードアプリからより多くの魅力を得ました

要件

• iOS 11

このコードを使用できる場合

• 食品配達アプリケーション、食品販売、または食品製造アプリを開発するとき、このコードは、フードリストのアニメーションとイラストの機能を提供し、ユーザーフレンドリーな操作で特定の食品のお気に入りのトッピングを追加するのに役立ちます。

コードスニペット

ステップ1 ：次または前の矢印アイコンを使用してアニメーションフードリストを表示

 @IBAction func btnClickNext(_ sender: UIButton)
{
    if isanimate == true
    {
        isanimate = false
        
        UIView.animate(withDuration: 1, delay: 0, options: .curveLinear, animations: {
            self.imgBurger?.transform = CGAffineTransform(scaleX: 0.001, y: 0.001)
            self.imgBurgername?.transform = CGAffineTransform(scaleX: 0.001, y: 0.001)
            self.lblPrice?.transform = CGAffineTransform(scaleX: 0.001, y: 0.001)
            
        }, completion: { _ in
            
            self.imgBurger?.transform = CGAffineTransform(scaleX: 0.0, y: 0.0)
            self.imgBurger?.image = UIImage(named: "burger")
            
            self.imgBurgername?.transform = CGAffineTransform(scaleX: 0.0, y: 0.0)
            self.imgBurgername?.image = UIImage(named: "burgername")
            
            self.lblPrice?.transform = CGAffineTransform(scaleX: 0.0, y: 0.0)
            self.lblPrice?.text = "12.99 $"
            
            UIView.animate(withDuration: 1, delay: 0, options: .curveLinear, animations: {
                self.imgBurger?.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
                self.imgBurgername?.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
                self.lblPrice?.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
                
            }, completion: nil)
            
        })
        
        let screenRect: CGRect = UIScreen.main.bounds
        var _: CGFloat = screenRect.size.width
        
        UIView.animate(withDuration: 1, delay: 0, options: .curveEaseInOut, animations: {
            self.lbltitle?.frame = CGRect(x: screenRect.size.width, y: (self.lbltitle?.frame.origin.y)!, width: (self.lbltitle?.frame.size.width)!, height: (self.lbltitle?.frame.size.height)!)
            self.lblSubtitle?.frame = CGRect(x: screenRect.size.width, y: (self.lblSubtitle?.frame.origin.y)!, width: (self.lblSubtitle?.frame.size.width)!, height: (self.lblSubtitle?.frame.size.height)!)
            
        }) { finished in
            //position screen left after animation
            self.lbltitle?.frame = CGRect(x: -screenRect.size.width, y: (self.lbltitle?.frame.origin.y)!, width: (self.lbltitle?.frame.size.width)!, height: (self.lbltitle?.frame.size.height)!)
            
            self.lblSubtitle?.frame = CGRect(x: -screenRect.size.width, y: (self.lblSubtitle?.frame.origin.y)!, width: (self.lblSubtitle?.frame.size.width)!, height: (self.lblSubtitle?.frame.size.height)!)
            
            //  Converted to Swift 4 by Swiftify v4.2.28558 - https://objectivec2swift.com/
            UIView.animate(withDuration: 1, delay: 0, options: .curveEaseInOut, animations: {
                self.lbltitle?.frame = CGRect(x: self.view.center.x - (self.lbltitle!.frame.size.width/2) , y: (self.lbltitle?.frame.origin.y)!, width: self.lbltitle!.frame.size.width, height: self.lbltitle!.frame.size.height)
                
                self.lblSubtitle?.frame = CGRect(x: self.view.center.x - (self.lblSubtitle!.frame.size.width/2) , y: (self.lblSubtitle?.frame.origin.y)!, width: self.lblSubtitle!.frame.size.width, height: self.lblSubtitle!.frame.size.height)
                
                //                    self.lbltitle?.center = self.view.center
                
            }) { finished in
                //do something after animation
            }
        }
        
    }
    else
    {
        isanimate = true
        
        UIView.animate(withDuration: 1, delay: 0, options: .curveLinear, animations: {
            self.imgBurger?.transform = CGAffineTransform(scaleX: 0.001, y: 0.001)
            self.imgBurgername?.transform = CGAffineTransform(scaleX: 0.001, y: 0.001)
            self.lblPrice?.transform = CGAffineTransform(scaleX: 0.001, y: 0.001)
            
        }, completion: { _ in
            
            self.imgBurger?.transform = CGAffineTransform(scaleX: 0.0, y: 0.0)
            self.imgBurger?.image = UIImage(named: "burger")
            
            self.imgBurgername?.transform = CGAffineTransform(scaleX: 0.0, y: 0.0)
            self.imgBurgername?.image = UIImage(named: "burgername")
            
            self.lblPrice?.transform = CGAffineTransform(scaleX: 0.0, y: 0.0)
            self.lblPrice?.text = "12.99 $"
            
            UIView.animate(withDuration: 1, delay: 0, options: .curveLinear, animations: {
                self.imgBurger?.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
                self.imgBurgername?.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
                self.lblPrice?.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
                
            }, completion: nil)
            
        })
        
        let screenRect: CGRect = UIScreen.main.bounds
        var _: CGFloat = screenRect.size.width
        
        UIView.animate(withDuration: 1, delay: 0, options: .curveEaseInOut, animations: {
            self.lbltitle?.frame = CGRect(x: screenRect.size.width, y: (self.lbltitle?.frame.origin.y)!, width: (self.lbltitle?.frame.size.width)!, height: (self.lbltitle?.frame.size.height)!)
            self.lblSubtitle?.frame = CGRect(x: screenRect.size.width, y: (self.lblSubtitle?.frame.origin.y)!, width: (self.lblSubtitle?.frame.size.width)!, height: (self.lblSubtitle?.frame.size.height)!)
            
        }) { finished in
            //position screen left after animation
            self.lbltitle?.frame = CGRect(x: -screenRect.size.width, y: (self.lbltitle?.frame.origin.y)!, width: (self.lbltitle?.frame.size.width)!, height: (self.lbltitle?.frame.size.height)!)
            
            self.lblSubtitle?.frame = CGRect(x: -screenRect.size.width, y: (self.lblSubtitle?.frame.origin.y)!, width: (self.lblSubtitle?.frame.size.width)!, height: (self.lblSubtitle?.frame.size.height)!)
            
            //  Converted to Swift 4 by Swiftify v4.2.28558 - https://objectivec2swift.com/
            UIView.animate(withDuration: 1, delay: 0, options: .curveEaseInOut, animations: {
                self.lbltitle?.frame = CGRect(x: self.view.center.x - (self.lbltitle!.frame.size.width/2) , y: (self.lbltitle?.frame.origin.y)!, width: self.lbltitle!.frame.size.width, height: self.lbltitle!.frame.size.height)
                
                self.lblSubtitle?.frame = CGRect(x: self.view.center.x - (self.lblSubtitle!.frame.size.width/2) , y: (self.lblSubtitle?.frame.origin.y)!, width: self.lblSubtitle!.frame.size.width, height: self.lblSubtitle!.frame.size.height)
                
                //                    self.lbltitle?.center = self.view.center
                
            }) { finished in
                //do something after animation
            }
        }   
    }
}

ステップ2 ：特定の食べ物に追加されたお気に入りのトッピングのアニメーションとイラストを表示

 @IBAction func btnClickCrack(_ sender: UIButton)
{
    
    UIView.animate(withDuration: 2, delay: 0, options: [.curveEaseIn], animations: {
        self.imgVegetable?.center.y = (self.imgBurger?.frame.origin.y)! + ((self.imgBurger?.frame.height)!/2)
        self.imgVegetable?.isHidden = false
        self.loadViewIfNeeded()

    }) { finished in
        self.imgVegetable?.breakGlass(size: GridSize(columns: 15, rows: 21), completion: {
            //                            self.reshowImage()
        })
    }
}

教えてください！

コンポーネントを使用しているプロジェクトへのリンクをお送りください。 [email protected]にメールを送信して、iOSのFood App UIアニメーションに関する質問や提案があるかどうかをお知らせください。

PSすべてのテクノロジーで、サードパーティライブラリ、コーディング標準、プラグインなどでより多くの素晴らしさの例を公開します。乞うご期待！

社会的につながりを保ちます

ポートフォリオリンクのいくつかにアクセスして、私たちの仕事にもっと精通してください。

ポートフォリオ| Facebook | Twitter | LinkedIn | Behance | Instagram |ドリブル|アップラブ

それらに従うことを忘れないでください。

ライセンス

 MIT License

Copyright © 2019 CMARIX TechnoLabs

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.