Food App UI Animation IOS
1.0.0
عرض التصميم على uplabs / dribbble / behance
الخطوة 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.
ملاحظة: سنقوم بنشر المزيد من أمثلة الذهول على مكتبات الجهات الخارجية ومعايير الترميز والمكونات الإضافية وما إلى ذلك ، في جميع التكنولوجيا. ابقوا متابعين!
تعرف أكثر على عملنا من خلال زيارة عدد قليل من روابط محافظنا.
محفظة | الفيسبوك | تويتر | LinkedIn | Behance | Instagram | Dribbble | الصعود
من فضلك لا تنسى متابعتهم.
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.
