iPhone日曆選擇器效果

時間 2020-04-25

原文原文鏈接

最近有個想法，要作一個仿iPhone日曆的選擇器插件，最終效果要以下圖：html

開始

首先注意到這些數字是按照滾輪的方式排列的，就先實現這個效果吧。web

3D的世界中有個重要屬性，transform rotate，其中rotateX效果以下ide

<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來修改這個中心點，若是讓一組圖片繞着同一個中心點旋轉，不就能組成上文的滾輪了嗎spa

        <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，再改：scala

終於有點樣子了3d

第二步非當前值置灰

觀察iPhone日曆選擇器，除了滾輪效果，還有逐漸置灰效果，越近越清晰，越遠越模糊。code

能夠用一個透明的遮罩遮在上面，越靠近中間不透明度越低，越靠近兩邊不透明度越高。這裏使用-webkit-linear-gradient來實現再合適不過了orm

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

-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>