效果如图:

代码如下:

//
// ViewController.swift
// TwoSidedView
//
// Created by mayl on 2017/12/14.
// Copyright © 2017年. All rights reserved.
// import UIKit let gBtn = UIButton.init(type: UIButtonType.custom)
let gImgV4BottomSide = UIImageView.init(image: UIImage.init(named: "bottomSide"))
let gImgV4TopSide = UIImageView.init(image: UIImage.init(named: "topSide")) var lBool4ChangeImgV : Bool = false
class ViewController: UIViewController { override func viewDidLoad() {
super.viewDidLoad()
setUpUI()
} func setUpUI() { view.addSubview(gBtn)
gBtn.addTarget(self, action: #selector(ViewController.btnDidClick), for: UIControlEvents.touchUpInside)
gBtn.center = view.center gBtn.addSubview(gImgV4BottomSide)
gBtn.layer.transform = CATransform3DMakeRotation(CGFloat(Double.pi), 0, 1, 0) gBtn.addSubview(gImgV4TopSide) //按钮大小设置为与图片大小一致
gBtn.bounds = gImgV4BottomSide.bounds
} @objc func btnDidClick() {
let lAni = CAKeyframeAnimation.init(keyPath: "transform.rotation.y")
lAni.duration = 1
lAni.values = [0, Double.pi]; //使得动画结束后,保持动画效果
lAni.isRemovedOnCompletion = false
lAni.fillMode = kCAFillModeForwards lAni.delegate = self; gBtn.layer.add(lAni, forKey: nil)
}
} extension UIViewController: CAAnimationDelegate{
public func animationDidStart(_ anim: CAAnimation) {
let lDur:CFTimeInterval = anim.duration
DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + lDur * 0.5) {
gBtn.bringSubview(toFront: lBool4ChangeImgV == false ? gImgV4BottomSide : gImgV4TopSide)
lBool4ChangeImgV = !lBool4ChangeImgV
}
}
}

素材:

点击按钮每次都能实现图片的旋转和切换(swift)的更多相关文章

  1. vue中点击按钮自动截图并下载图片

    点击一个按钮,截取对应区域的界面,才对截取的界面进行裁切并下载 下载    html2canvas    npm install html2canvas  --save 引用 : import htm ...

  2. jqs实现图片轮播--通过点击按钮来实现

    <!-- 布局思路:一个大的div,中有一个ul.和一个箭头的div css样似描述: 整个盒子距离顶部100px,又水平居中 盒子的宽高为图片的实际宽高 由于每次都是看见了一张图片:有两种方式 ...

  3. LISTVIEW嵌套GRIDVIEW的一些处理(点击GRIDVIEW的条目,能够显示他在LISTVIEW中的位置)(对这篇文章的优化处理,不每次都new onItemClickListener)

    前几天写了点击GRIDVIEW的条目,能够显示他在LISTVIEW中的位置,当时的处理是在ListView的适配器里的GetView方法里每次都new GridView的onItemClickList ...

  4. JAVA Eclipse如何设置点击按钮切换图片

    右击图片文件夹,新建一个Android XML文件   设置文件的名称,注意这个新建的xml文件就是会被用作按钮的background属性的,所以名字不要太奇怪,设置Root Element为sele ...

  5. win32 htmlayout点击按钮创建新窗口,以及按钮图片样式

    最近在做一个C++ win32的桌面图形程序,我不是C++程序员,做这个只是因为最近没什么java的活. windows api,之前接触的时候,还是大学,那时用这个开发打飞机游戏纯粹是娱乐.现在基本 ...

  6. JQuery实现点击按钮切换图片(附源码)--JQuery基础

    JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><ht ...

  7. 鼠标点击按钮控制图片移动或者键盘控制图片移动(解决问题:parseInt失效问题,用Number)

    在测试用鼠标点击按钮,使图片左右上下移动: 效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...

  8. 【demo练习三】:图片水平滚动、点击按钮变更图片动画

    要求:四张图片水平滚动,每隔5秒进行一次循环,点击按钮随机变更图片. XAML前台代码: <Window x:Class="图片滚动.MainWindow" xmlns=&q ...

  9. vue 项目, 通知子组件更新,父组件中每次点击按钮重新加载子组件,(重新生成dom 元素)

    vue是组件化开发的项目,很多情况下会把公共组件提取出来,来减少代码量,提高开发效率,和以后更好的可维护性.很多情况下,父组件中都会引用子组件这种情况.通过给在父组件中引用的子组件标签上添加属性,来渲 ...

随机推荐

  1. *args和**kwargs的作用

    ∗args的作用: *的作用有2个 打包参数(pack)和拆分参数(unpack) 函数接受实参时,按顺序分配给函数形参,如果遇到带∗的形参,那么就把还未分配出去的实参以元组形式打包(pack),分配 ...

  2. python编程【环境篇】- 如何优雅的管理python的版本

    简介 之前的文章(Python2还是python3 )中我们提到,建议现在大家都采用python3,因为python2在今年年底将不在维护.但在实际的开发和使用python过程中,我们避免不了还得用到 ...

  3. Can't connect to MySQL server on 'localhost' (10061),连接Navicat报错问题解决

    今天,装了Mysql 1.1.7后,连接Navicat 时报错,后来找了一阵,发现问题所在. 原因是我在安装时把默认端口号3306修改成了3303, 连接时,把默认端口也修改下就好啦.

  4. day5-字典专区

    # 字典# dict 1.fromkeys()根据序列,创建字典,并指定统一的值 v = dict.fromkeys(["],123) print(v) {': 123} 2.get()根据 ...

  5. Ember.js和Vue.js对比,哪个框架更优秀?

    本文由葡萄城技术团队于博客园翻译并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. JavaScript最初是为Web应用程序创建的.但是随着前端技术的 ...

  6. Oracle 数据库基础:数据查询与操作

    SELECT uname FROM TUser WHERE uname=‘admin’ SELECT 字段名列表 FROM 表名 WHERE 条件; 在Oracle数据库中,对象是属于模式的,每个账户 ...

  7. MyBatis两种传参方式的区别

    $与#的区别 select * from T_PRINT_LAYOUT where D_RECID = ${recId} 最后生成的SQL为: select * from T_PRINT_LAYOUT ...

  8. [quartusⅡ] 使用quartusⅡ的过程中,遇到过的一些“软件上的问题”

    1.USB blaster的驱动在设备管理器上点“更新驱动软件”,更新不了,说什么哈希值不在指定目录下,如下图, 解决方法是,https://blog.csdn.net/rdgfdd/article/ ...

  9. 微擎框架商业版 V2.1.2 去后门一键安装版+去除云平台+无附带模块

    下载地址:http://dd.ma/AdVvoDu5 关注微信公众号codervip,点击公众号菜单,获取提取码! 这个是一键安装版本,所以微擎安装比较简单,不用大家手动去改数据库了,而且修复上个2. ...

  10. [Error]Archive for required library: 'C:/Users/fk/.m2/repository/com/sun/xml/bind/jaxb-core/2.2.7/jaxb-core-2.2.7.jar'

    Eclipse报错: Description Resource Path Location Type Archive for required library: 'C:/Users/fk/.m2/re ...