Food App UI Animation IOS

Animación de UI de la aplicación de comida - iOS

Vea el diseño en las placas / dribbble / behance

Características del núcleo

• Animación e ilustración para representar las características del menú de comida y agregar ingredientes favoritos en su comida
• Ver animación tocando el producto anterior y siguiente icono de flecha para el menú de alimentos
• Ver animación en Agregar cobertura favorita en tu comida

Cómo funciona

• El usuario puede seleccionar el menú de productos de alimentos
• Después de tocar el menú de productos alimenticios, vea todos los productos alimenticios con animación e ilustración
• Una vez que haga clic en el icono de flecha anterior o siguiente, el siguiente artículo de alimentación aparecerá en la pantalla con la animación e ilustración
• Ver múltiples coberturas relacionadas con el producto alimenticio en la parte inferior
• Toque la cobertura favorita que desea agregar en su comida. En Tap, se agregará una cobertura particular a su comida con animación e ilustración

Propósito de este código

• La animación de alimentos mostrará la ilustración de la comida real
• Con la animación, el usuario recibió más atracción de la aplicación de comida

Requisitos

• iOS 11

Cuando puedes usar este código

• Cuando está desarrollando una aplicación de entrega de alimentos, venta de alimentos o una aplicación para hacer alimentos, este código lo ayudará a proporcionar funcionalidad de animación e ilustración para la lista de alimentos y agregar la cobertura favorita para alimentos particulares con operaciones fáciles de usar.

Fragmento de código

Paso 1 : Ver Lista de alimentos de animación usando el icono de flecha siguiente o anterior

 @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
            }
        }   
    }
}

Paso 2 : Ver animación e ilustración para la cobertura favorita agregada en la comida en particular

 @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()
        })
    }
}

¡Háganos saber!

Estaríamos muy felices si nos enviara enlaces a sus proyectos donde usa nuestro componente. Simplemente envíe un correo electrónico a [email protected] y háganos saber si tiene alguna pregunta o sugerencia sobre la animación de la interfaz de usuario de la aplicación de alimentos en iOS.

PD: Vamos a publicar más ejemplos de genialidad en bibliotecas de terceros, estándares de codificación, complementos, etc., en toda la tecnología. ¡Manténganse al tanto!

Mantente socialmente conectado

Familiarice más con nuestro trabajo visitando algunos de nuestros enlaces de cartera.

Cartera | Facebook | Twitter | LinkedIn | Behance | Instagram | Dribbble | Ascendentes

Por favor, no olvides seguirlos.

Licencia

 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.