随slider变化而变化的圆

先来看看效果

基本思路是取slider的值,用animate改变圆的frame(当然其他方法也可以,然而我就喜欢这么干)

从slider取到的值是value,设为缩放倍数。要实现的效果就是长宽同时缩放value倍(这个圆其实是圆角矩形,圆角设为长度一半)。

这里我用的是UIView.animateWithDuration这个函数,但是如果只在里面设置frame的长宽变化就会发生这样的事

               

然而右图才是我们要的效果。

为什么呢?!因为frame的CGRectMake的x和y不变!所以x和y也要做相应改变。因为这个东西是圆,所以以圆点为中心缩放的时候,长宽的增量是相等的。要保持圆点不变的话,左右和上下增量也应该是一样的。所以左边的增量就要靠改变x实现,上面的增量要靠改变y实现!

原长宽设为width和height的话,改变后的长宽就是value*width和value*height,增量就是width*(value-1)和height*(value-1),(x,y)的变化后就应该是(x-(width*(value-1)),y-(height*(value-1))),就是这样~

我这里设置slider的value范围是1~5。贴代码:

 @IBAction func slider(sender: UISlider) {
        print("\(sender.value)")
        UIView.animateWithDuration(1.0) {
            self.slayer.frame = CGRectMake(120-50*(CGFloat(sender.value-1))/2, 230-50*(CGFloat(sender.value-1))/2, CGFloat(50*sender.value), CGFloat(50*sender.value))
            self.slayer.cornerRadius = CGFloat(50*sender.value/2)

        }

    }
时间: 2024-10-11 18:25:42

随slider变化而变化的圆的相关文章

CSS 布局_如何实现容器中每一行的子容器数量随着浏览器宽度的变化而变化?

实现一个浮动布局,红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化,就如下图: 要实现这样一个布局,我们首先需要如下的 HTML: <div id="float-container"> <div class="float-element"></div> <div class="float-element"></div> <div class="float-elem

布局(左边的div随着右边div的高度变化而变化)

今天同学问了一个左边div的高度随着右边div的高度变化而变化的问题.开始想了想有点蒙.中间试着用height:100%:试过发现并不可行,因为高度百分比必须有确切的祖先元素(即设置了px)才可以.由于今天晚上正在团建,回来都12点多了.然后怎么也睡不着就做做这个吧,发现一坐下来安心的想问题,竟然迎刃而解了. 我用到的方法是1父元素设置position:relative;2左边的div设置position:absolute;top:0;bottom:0;这个也是css3中flex布局的实现原理.

CSS 布局实例系列(四)如何实现容器中每一行的子容器数量随着浏览器宽度的变化而变化?

Hello,小朋友们,还记得我是谁吗?对了,我就是~超威~好啦,言归正传,今天的布局实例是: 实现一个浮动布局,红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化,就如下图: 肯定有人心里犯嘀咕了,哈~这么简单,不就是全部左浮动嘛,这也好意思拿出来讲?别急啊,其实里面的坑还是挺多的,且待我一个个填上. 要实现这样一个布局,我们首先需要如下的 HTML: <div id="float-container"> <div class="float-eleme

CSS布局:div高度随窗口变化而变化(BUG会有滚动条)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS布局:div高度随窗口变化而变化</

css div的宽度随内部元素的宽度的变化而变化

div是块级元素,如果不设置他的明确的宽度,那他就等于父元素的宽度,如果要让其它随着子元素的变化而变化,需要改变他的属性,给他加上这个css属性即可display:inline-block 或干脆把div直接替换为span解决一切问题

CSS父元素高度随子元素高度变化而变化

<html> <body> <head> <style> #menu{width:1000px;overfloat:hidden;} /* width:1000px;overfloat:hidden; 父元素高度随子元素变化而变化 */ #menu ul{list-style-type:none;} #menu ul li{float:left;margin-right:10px;} /* float:left; 浮动横布局,让父元素高度变0px */ &l

div高度随窗口变化而变化

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS布局:div高度随窗口变化而变化</

textarea文本域的高度随内容的变化而变化

用css控制textarea文本域的高度随内容的变化而变化,不出现滚动条. CSS代码: 复制代码 代码如下: .t_area{ width:300px; overflow-y:visible } <textarea class="t_area"> 随便在这里输入内容,textarea的高度会随着你输入的内容而变化,不会出现滚动条,实现很简单,就是一段css:overflow-y:visible </textarea> 首先,原则上实现textarea自适应必须

如何让窗体大小随着控件的大小变化而变化

form的autosize=true,formborderstyle=fixedsingle tablelayoutpanel及其里面的容器的dock=fill,autosize=true label中的文字比较贴着窗体边缘时可以通过padding属性来调整 因定宽度则可以使用tablelayoutpanel中的列固定 atablelayoutpanel中的行也可以固定,而不固定行直接按百分比来设置 如何让窗体大小随着控件的大小变化而变化

mfc控件自适应窗口大小,随窗口大小变化而变化

作为一个mfc的初学者,难免会遇到这样的问题,窗口可以改变大小,而其中的控件大小也随之改变,那怎么样去做呢. 1.对应窗口的属性Maximize Box和Minimize Box设置为true,从而能够使窗口最大化和最小化,Border属性设置为Resizing从而可以改变窗口的大小. 2.在消息有个WM_SIZE,添加函数OnSize,这样可以在函数内调整控件的大小,特别说明很多代码中利用当前控件比值与窗口大小比值再乘上当前窗口大小来改变控件大小,但是由于精度的问题,调整多次就会出问题,那么这