iPhone日历选择器效果

最近有个想法，要做一个仿iPhone日历的选择器插件，最终效果要如下图：

开始

首先注意到这些数字是按照滚轮的方式排列的，就先实现这个效果吧。

3D的世界中有个重要属性，transform rotate，其中rotateX效果如下

<img src="favicon.ico" style="transform:rotateX(0deg);">
<img src="favicon.ico" style="transform:rotateX(10deg);">
<img src="favicon.ico" style="transform:rotateX(20deg);">
<img src="favicon.ico" style="transform:rotateX(30deg);">
<img src="favicon.ico" style="transform:rotateX(40deg);">
<img src="favicon.ico" style="transform:rotateX(50deg);">
<img src="favicon.ico" style="transform:rotateX(60deg);">
<img src="favicon.ico" style="transform:rotateX(70deg);">
<img src="favicon.ico" style="transform:rotateX(80deg);">
<img src="favicon.ico" style="transform:rotateX(90deg);">

这个太阳看着一个比一个扁，其实他们再沿着X轴做旋转呢。旋转都有一个旋转中心，默认就是自己的中心点，但我们可以通过translateZ来修改这个中心点，如果让一组图片绕着同一个中心点旋转，不就能组成上文的滚轮了吗

        <ul class="picker_ul">
            <img src="favicon.ico" style="transform:rotateX(0deg) translateZ(50px);">
            <img src="favicon.ico" style="transform:rotateX(10deg) translateZ(50px);">
            <img src="favicon.ico" style="transform:rotateX(20deg) translateZ(50px);">
            <img src="favicon.ico" style="transform:rotateX(30deg) translateZ(50px);">
            <img src="favicon.ico" style="transform:rotateX(40deg) translateZ(50px);">
            <img src="favicon.ico" style="transform:rotateX(50deg) translateZ(50px);">
            <img src="favicon.ico" style="transform:rotateX(60deg) translateZ(50px);">
            <img src="favicon.ico" style="transform:rotateX(70deg) translateZ(50px);">
            <img src="favicon.ico" style="transform:rotateX(80deg) translateZ(50px);">
            <img src="favicon.ico" style="transform:rotateX(90deg) translateZ(50px);">
        </ul>

效果如下：

这里旋转的角度，translate的具体还是需要经过计算的。我们计划用十张图片围成一个圆，那步长应该是36deg，图片是48*48，所以半径应该是480/2/3.1415926=77px，再改：

终于有点样子了

第二步非当前值置灰

观察iPhone日历选择器，除了滚轮效果，还有逐渐置灰效果，越近越清晰，越远越模糊。

可以用一个透明的遮罩遮在上面，越靠近中间不透明度越低，越靠近两边不透明度越高。这里使用-webkit-linear-gradient来实现再合适不过了

-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

-webkit-linear-gradient就是一个颜色透明度的线性渐变，我们可以控制几个渐变点

如：

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <meta name="format-detection" content="telephone=no">
 6     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <title>时间日期选择器</title>
 8     <style>
 9         body{margin:0;}
10         ul{margin:0;padding:0;list-style:none;
11             -webkit-transition:transform 1s;
12         }
13         img{text-align:center;line-height:30px;font-size:1.1em;
14             -webkit-transition:opacity 1s, transform 1s;position:absolute;right:50%;top:60px;
15         }
16         .picker{position:relative;height:180px;}
17         .picker_ul{position: absolute;z-index:1;width:100%;overflow:hidden;height:100%;}
18         .picker_panel{position:absolute;z-index:2;width:100%;height:100%;top:0;
19             background:-webkit-linear-gradient(top, rgb(255, 255, 255) 0, rgba(220, 220, 220, 0) 48%, rgba(220, 220, 220, 0) 52%, rgb(255, 255, 255) 100%);}
20     </style>
21 </head>
22 <body>
23 <div id="demo2">
24     <div class="picker">
25         <ul class="picker_ul">
26             <img src="favicon.ico" style="transform:rotateX(-72deg) translateZ(77px);">
27             <img src="favicon.ico" style="transform:rotateX(-36deg) translateZ(77px);">
28             <img src="favicon.ico" style="transform:rotateX(0deg) translateZ(77px);">
29             <img src="favicon.ico" style="transform:rotateX(36deg) translateZ(77px);">
30             <img src="favicon.ico" style="transform:rotateX(72deg) translateZ(77px);">
31             <img src="favicon.ico" style="transform:rotateX(108deg) translateZ(77px);">
32             <img src="favicon.ico" style="transform:rotateX(144deg) translateZ(77px);">
33             <img src="favicon.ico" style="transform:rotateX(180deg) translateZ(77px);">
34             <img src="favicon.ico" style="transform:rotateX(216deg) translateZ(77px);">
35             <img src="favicon.ico" style="transform:rotateX(252deg) translateZ(77px);">
36         </ul>
37         <div class="picker_panel"></div>
38     </div>
39 </div>
40 <script src="lib/zepto.js"></script>
41 </body>
42 </html>

View Code

有点样子了，但跟日历选择器效果还有点差距，主要是因为我们是从中心到两边全部都是在渐变的，而选择器是中间某一个范围内都是黑色，越过一个范围突然开始渐变的。这里修改

-webkit-linear-gradient变为：

background:-webkit-linear-gradient(top, rgb(255, 255, 255) 0, rgba(255, 255, 255, 0.5) 40%, rgba(255, 255, 255, 0) 41%, rgba(255, 255, 255, 0) 54%, rgba(255, 255, 255, 0.5) 55%, rgb(255, 255, 255) 100%);}
当然这个停顿百分比需要仔细计算

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <meta name="format-detection" content="telephone=no">
 6     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <title>时间日期选择器</title>
 8     <style>
 9         body{margin:0;}
10         ul{margin:0;padding:0;list-style:none;
11             -webkit-transition:transform 1s;
12         }
13         img{text-align:center;line-height:30px;font-size:1.1em;
14             -webkit-transition:opacity 1s, transform 1s;position:absolute;right:50%;top:60px;
15         }
16         .picker{position:relative;height:180px;}
17         .picker_ul{position: absolute;z-index:1;width:100%;overflow:hidden;height:100%;}
18         .picker_panel{position:absolute;z-index:2;width:100%;height:100%;top:0;
19             background:-webkit-linear-gradient(top, rgb(255, 255, 255) 0, rgba(255, 255, 255, 0.5) 40%, rgba(255, 255, 255, 0) 41%, rgba(255, 255, 255, 0) 54%, rgba(255, 255, 255, 0.5) 55%, rgb(255, 255, 255) 100%);}
20     </style>
21 </head>
22 <body>
23 <div id="demo2">
24     <div class="picker">
25         <ul class="picker_ul">
26             <img src="favicon.ico" style="transform:rotateX(-72deg) translateZ(77px);">
27             <img src="favicon.ico" style="transform:rotateX(-36deg) translateZ(77px);">
28             <img src="favicon.ico" style="transform:rotateX(0deg) translateZ(77px);">
29             <img src="favicon.ico" style="transform:rotateX(36deg) translateZ(77px);">
30             <img src="favicon.ico" style="transform:rotateX(72deg) translateZ(77px);">
31             <img src="favicon.ico" style="transform:rotateX(108deg) translateZ(77px);">
32             <img src="favicon.ico" style="transform:rotateX(144deg) translateZ(77px);">
33             <img src="favicon.ico" style="transform:rotateX(180deg) translateZ(77px);">
34             <img src="favicon.ico" style="transform:rotateX(216deg) translateZ(77px);">
35             <img src="favicon.ico" style="transform:rotateX(252deg) translateZ(77px);">
36         </ul>
37         <div class="picker_panel"></div>
38     </div>
39 </div>
40 <script src="lib/zepto.js"></script>
41 </body>
42 </html>

View Code

这个效果是不是好多了

回归正题

将上述研究应用到数字上，就是我们的成果了

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <meta name="format-detection" content="telephone=no">
 6     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <title>时间日期选择器</title>
 8     <style>
 9         body{margin:0;}
10         #demo2 ul{margin:0;padding:0;list-style:none;
11             -webkit-transition:transform 1s;
12         }
13         #demo2 li{text-align:center;line-height:30px;font-size:1.5em;
14             -webkit-transition:opacity 1s, transform 1s;position:absolute;right:50%;top:60px;
15         }
16         ul{margin:0;padding:0;list-style:none;
17         }
18         li{text-align:center;line-height:30px;font-size:1.1em;
19         }
20         .picker{position:relative;height:150px;}
21         .picker_ul{position: absolute;z-index:1;width:100%;overflow:hidden;height:100%;}
22         .picker_panel{position:absolute;z-index:2;width:100%;height:100%;top:0;
23             background:-webkit-linear-gradient(top, rgb(255, 255, 255) 0, rgba(255, 255, 255, 0.5) 40%, rgba(255, 255, 255, 0) 41%, rgba(255, 255, 255, 0) 54%, rgba(255, 255, 255, 0.5) 55%, rgb(255, 255, 255) 100%);}
24         .picker_line{position:absolute;top:50%;margin-top:-15px;border-top:1px solid #aaa;border-bottom:1px solid #aaa;height:30px;width:100%;}
25     </style>
26 </head>
27 <body>
28 <div id="demo2">
29     <div class="picker">
30         <ul class="picker_ul">
31             <li style="-webkit-transform: rotateX(-72deg) translateZ(48px);">10</li>
32             <li style="-webkit-transform: rotateX(-36deg) translateZ(48px);">11</li>
33             <li style="-webkit-transform: rotateX(0deg) translateZ(48px);">12</li>
34             <li style="-webkit-transform: rotateX(36deg) translateZ(48px);">13</li>
35             <li style="-webkit-transform: rotateX(72deg) translateZ(48px);">14</li>
36         </ul>
37         <div class="picker_panel"></div>
38         <div class="picker_line"></div>
39     </div>
40 </div>
41 <div id="demo"></div>
42 <script src="lib/zepto.js"></script>
43 <!--script src="js/picker.js"></script-->
44 </body>
45 </html>

View Code

posted on 2016-11-30 23:00 风吹树叶黄阅读(1090) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

风吹树叶黄