How to Animate UIView on a line path without using UIBezierPath? - ios

Question

I have draw UIView say rectangle(player) and line, using context using draw(_ rect: CGRect) method.
I want to move the player on a line when clicking the play button.
I have searched lots of, but I found only for UIBezierpath but I want to use it with context
and I have tried some code name with playAnimation function.
class CanvasView : UIView{
// straight line
var lineStartPoint = CGPoint()
var lineEndpoint = CGPoint()
var lineStrokeList = [Lines]()
var lineDict : [String : Lines] = [:]
var lineActionDictionary : [String : [String : Lines]] = [:]
var linesPath : CGPath?
//player
var playerPoint : CGPoint?
var playerList = [Players]()
var playerDict : [Int : Players] = [:]
var selectedPlayerNumber : Int = 0
//action
var actionDict : [String : String] = ["1" : "1"]
var actionKeyIndex = String()
var actionList : [String] = [String]()
// common
var strokeWidth : CGFloat = 2.0
var currentColor = UIColor.black.cgColor
var imageSize : CGFloat = 30.0
private var selectedShape : ShapeType = .player
//MARK: Touches Began
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
guard let touch = touches.first else { return }
switch selectedShape {
case .player:
playerPoint = touch.location(in: self)
playerDict.forEach { (key,value) in
if value.rect.contains(playerPoint ?? CGPoint()){
selectedPlayerNumber = Int(key)
self.playerDict.removeValue(forKey: selectedPlayerNumber)
return
}
}
setNeedsDisplay()
case .line:
let pos = touch.location(in: self)
lineStartPoint = pos
lineEndpoint = pos
setNeedsDisplay()
}
}
//MARK: Touches Moved
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
guard let touch = touches.first else { return }
let isfreeDrawSelected = isfreeDrawSelected
switch selectedShape {
case .player:
playerPoint = touch.location(in: self)
setNeedsDisplay()
case .line:
lineEndpoint = touch.location(in: self)
setNeedsDisplay()
}
}
//MARK: Touches Ended
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
guard let touch = touches.first else { return }
switch selectedShape {
case .player:
if playerPoint != nil {
let point = CGPoint(x: playerPoint!.x, y: playerPoint!.y)
let x = playerPoint!.x - 15
let y = playerPoint!.y - 15
let playerRect = CGRect(x: x, y: y, width: imageSize, height: imageSize)
let playerstruct = Players(point: point,rect: playerRect)
playerList.append(playerstruct)
playerDict[selectedPlayerNumber] = playerstruct
playerPoint = nil
selectedPlayerNumber += 1
setNeedsDisplay()
}
case .line:
lineEndpoint = touch.location(in: self)
if !playerDict.isEmpty{
if lineActionDictionary[actionKeyIndex]?[String(selectedPlayerNumber)] != nil{
let alert = UIAlertController(title: "", message: "You can't add mutiple lines for action \(actionKeyIndex)", preferredStyle: .alert)
alert.addAction(UIAlertAction(title: "OK", style: .default, handler: { alertAction in
debugPrint(self.lineActionDictionary)
}))
UIApplication.shared.windows
.last?.rootViewController?
.present(alert, animated: false, completion: nil)
}
else{
let line = Lines(startPoint: lineStartPoint, endPoint: lineEndpoint, color: currentColor, width: strokeWidth)
lineStrokeList.append(line)
lineDict[String(selectedPlayerNumber)] = line
if lineActionDictionary[actionKeyIndex] != nil {
lineActionDictionary[actionKeyIndex]!.updateValue(line, forKey: String(selectedPlayerNumber))
}else{
lineActionDictionary[actionKeyIndex] = lineDict
}
}
lineStartPoint = CGPoint()
lineEndpoint = CGPoint()
lineDict.removeAll()
setNeedsDisplay()
}
}
}
//MARK: Draw
override func draw(_ rect: CGRect) {
guard let context = UIGraphicsGetCurrentContext() else { return }
if playerPoint != nil {
let x = (playerPoint?.x)! - 15
let y = (playerPoint?.y)! - 15
let player = CGRect(x: x, y: y, width: imageSize, height: imageSize)
context.addRect(player)
context.drawPath(using: .stroke)
linesPath = context.path
}
if !playerDict.isEmpty{
playerDict.forEach { (key,value) in
let x = value.point.x - 15
let y = value.point.y - 15
let player = CGRect(x: x, y: y, width: imageSize, height: imageSize)
let colorView = UIView(frame: player)
context.addRect(player)
context.drawPath(using: .stroke)
}
}
if lineStartPoint.x > 0 && lineEndpoint.y > 0{
context.setLineCap(.round)
context.setLineWidth(2.0)
context.move(to: lineStartPoint)
context.addLine(to: lineEndpoint)
context.setStrokeColor(UIColor.black.cgColor)
context.strokePath()
}
if !lineActionDictionary.isEmpty{
lineActionDictionary.forEach { (actionkey,actionvalue) in
actionvalue.forEach { (playerkey,playervalue) in
let startPoint = playervalue.startPoint
let endPoint = playervalue.endPoint
let color = playervalue.color
let width = playervalue.width
context.setLineCap(.round)
context.setLineWidth(width)
context.move(to: startPoint)
context.addLine(to: endPoint)
context.setStrokeColor(color)
context.strokePath()
}
}
}
}
func selectedShape(selctedShapes : ShapeTypes) {
selectedShape = selctedShapes
}
func playAnimation(){
switch selectedShape {
case .player:
break
case .line:
let player = playerList.first
let views = UIView(frame: player!.rect)
views.alpha = 1.0
UIView.animate(withDuration: 0.25, animations: {
views.frame = CGRect(x: 0, y: 10, width: 20, height: 20)
}, completion: {
(value: Bool) in
debugPrint(">>> Animation done.")
})
}
}
}
#ShapeTypes Enum
enum ShapeTypes : Int {
case player = 0
case line
}
#UIViewController
#available(iOS 14.0, *)
class TestVC : UIViewController{
#IBOutlet weak var colorPicker: UIImageView!
#IBOutlet weak var sliderMaxValueLbl: UILabel!
#IBOutlet weak var radiusSlider: UISlider!
#IBOutlet weak var tv: CanvasView!
#IBOutlet weak var shapeSegment : UISegmentedControl!
#IBOutlet weak var playerFormationPickerDoneBtn: UIButton!
#IBOutlet weak var playerFormationPicker: UIPickerView!
#IBOutlet weak var playerFormationTF: UITextField!
#IBOutlet weak var actionPickerDoneBtn: UIButton!
#IBOutlet weak var actionPicker: UIPickerView!
#IBOutlet weak var actionPickerTF: UITextField!
#IBOutlet weak var addActionBtn: UIBarButtonItem!
//playerformation pickerview
var playerFormationPickerData = String()
var playerFormationPickerSelectedIndex = Int()
var isPlayerFormationSelected : Bool = false
var playerViewArray: [PlayerView] = []
var pickerViewListData: [String] = [String]()
//action pickerview
var actionPickerData = String()
var actionPickerSelectedIndex = Int()
#IBAction func actionPickerDoneButtonAction(_ sender: UIButton) {
actionPickerDoneBtn.isHidden = true
actionPicker.isHidden = true
actionPickerTF.text = actionPickerData
tv.actionKeyIndex = actionPickerTF.text?.components(separatedBy: " ").last ?? ""
debugPrint(tv.actionKeyIndex)
}
func setSliderThumb(_ color: UIColor, _ width : CGFloat) {
let circleImage = makeCircleWith(size: CGSize(width: width, height: width),
backgroundColor: color)
radiusSlider.setThumbImage(circleImage, for: .normal)
radiusSlider.setThumbImage(circleImage, for: .highlighted)
}
fileprivate func makeCircleWith(size: CGSize, backgroundColor: UIColor) -> UIImage? {
UIGraphicsBeginImageContextWithOptions(size, false, 0.0)
let context = UIGraphicsGetCurrentContext()
context?.setFillColor(backgroundColor.cgColor)
context?.setStrokeColor(UIColor.black.cgColor)
let bounds = CGRect(origin: .zero, size: size)
context?.addEllipse(in: bounds)
context?.drawPath(using: .fill)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image
}
#IBAction func radiusSliderAction(_ sender: UISlider) {
let radius = Int(radiusSlider.value)
tv.radius = CGFloat(radius)
sliderMaxValueLbl.text = String(radius)
}
#IBAction func playAnimationAction(_ sender: UIBarButtonItem) {
tv.playAnimation()
}
override func viewDidLoad() {
super.viewDidLoad()
radiusSlider.minimumValue = 30
radiusSlider.maximumValue = 100
radiusSlider.value = 0
sliderMaxValueLbl.text = String(Int(radiusSlider.value))
setSliderThumb(UIColor.white, 20)
if let img = UIImage(named: "ground") { //background image
UIGraphicsBeginImageContext(tv.frame.size)
img.draw(in: tv.bounds)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
if let image = image {
tv.backgroundColor = UIColor(patternImage: image)
tv.contentMode = .scaleAspectFill
}
}
actionPicker.delegate = self
actionPicker.dataSource = self
actionPicker.isHidden = true
actionPickerTF.delegate = self
actionPickerTF.textAlignment = .center
actionPickerTF.placeholder = "Select action"
actionPickerDoneBtn.isHidden = true
actionPickerDoneBtn.tintColor = .systemBlue
tv.actionKeyIndex = tv.actionDict["1"] ?? ""
tv.actionList = ["action \(tv.actionKeyIndex)"]
actionPickerData = tv.actionList[0]
actionPickerTF.text = actionPickerData
tv.currentColor = UIColor.black.cgColor
}
#IBAction func addActionButton(_ sender: UIBarButtonItem) {
let count = tv.actionList.count + 1
let element = tv.lineActionDictionary.keys.max()
// let element = tv.actionDict.values.max() // find max dict value
guard let maxValue = element?.first?.wholeNumberValue else { return }
debugPrint(maxValue)
tv.actionKeyIndex = String(maxValue + 1)
actionPickerTF.text = "action \(tv.actionKeyIndex)"
tv.actionList.append("action \(tv.actionKeyIndex)")
actionPicker.reloadAllComponents()
}
#IBAction func selectShapeSegmentAction(_ sender: UISegmentedControl) {
let selectShape : ShapeType = ShapeTypes(rawValue: shapeSegment.selectedSegmentIndex) ?? .player
tv.selectedShape(selctedShape: selectShape)
}
}
#available(iOS 14.0, *)
extension TestVC : UIPickerViewDelegate {
func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
if pickerView == actionPicker{
actionPickerData = tv.actionList[row]
actionPickerTF.text = actionPickerData
actionPickerSelectedIndex = actionPicker.selectedRow(inComponent: 0)
}
}
}
#available(iOS 14.0, *)
extension TestVC : UIPickerViewDataSource {
func numberOfComponents(in pickerView: UIPickerView) -> Int {
return 1
}
func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
return tv.actionList.count
}
func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
return tv.actionList[row]
}
func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView {
var title = UILabel()
if let view = view {
title = view as! UILabel
}
if pickerView == actionPicker {
title.text = tv.actionList[row]
}
title.font = UIFont.systemFont(ofSize: 16, weight: UIFont.Weight.medium)
title.textColor = UIColor.black
title.textAlignment = .center
return title
}
}

Answer 1

Lets say you have some customView and you want to simply temporary move it a little bit down. Here is lightweight solution.
let customView = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
func animateGoingDown() {
UIView.animate(withDuration: 0.5) {
self.customView.transform = CGAffineTransform(translationX: 0, y: 200)
}
}
func animateGoingToOriginalPosition() {
UIView.animate(withDuration: 0.5) {
self.customView.transform = .identity
}
}
Howefully this is what you are searching for. If you have some questions, do not hesitate to ask.