摘要:說明此版本輪播圖為仿照網易云音樂播放器上首頁的輪播。網易的輪播特殊的地方就在于,如果你滑動不相鄰的兩張圖片,其過渡效果并不是滑動過渡,而是一個跳出過渡,此方面原理與最開始設計輪播排版時候有極大關聯。
說明:
此版本輪播圖為仿照網易云音樂PC播放器上首頁的輪播。
網易的輪播特殊的地方就在于,如果你滑動不相鄰的兩張圖片,其過渡效果并不是滑動過渡,而是一個跳出過渡,此方面原理與最開始設計輪播排版時候有極大關聯。
此輪播為純react環境下的es6寫法,通過對state中數組的重組排列,配合樣式。達到輪播的效果
無任何依賴,最終效果為封裝成react組件開放接口并發布出去
注:此文章為正推,并在開發完成后進行總結優化。
一、搭建架構此方面的文章應該很多,我就不必過多介紹,去github上找個react腳手架搭建一下基本項目框架即可。
我用的框架為改良過的一版本dva框架。react腳手架,github上很多,推薦自己選擇一款進行改良,我用的并不一定適合你。
二、準備材料1.大于4張尺寸相同圖片。(本人為八張圖片命名1-8)
2.react環境
3.網易云PC播放器
先把首張圖片和左右兩側能看見的圖片位置擺好,
最開始的靜態結構是這個樣子的
新手注意:如發現代碼刺眼,less、es6語法自行惡補
import React from "react";
import styles from "./Slide.less";
class Slide extends React.Component {
constructor(props) {
super(props);
this.state = {
dir: [
{ name: "middle" },
{ name: "start" },
{ name: "normal" },
{ name: "normal" },
{ name: "normal" },
{ name: "normal" },
{ name: "normal" },
{ name: "end" },
],
};
}
render() {
const { dir } = this.state;
return (
{/* 外部容器*/}
{/* 內部循環*/}
{
dir.map((item, key) => {
return (
// 此處偷懶
{""}
);
})
}
);
}
}
export default Slide;
less如下
.root{
width: 100%;
background: #ccc;
.slideBox{
width: 50%;
height: 15vw;
margin: 0 auto;
position: relative;
background: #ccc;
.slide{
position: absolute;
img{
width: 100%;
}
.masking{ // 蒙板,有個灰度漸變的效果
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .15);
}
&.middle{ // 此為中間展示的那張
left: 10%;
bottom: 0%;
width: 80%;
z-index: 33;
}
&.start{ // 第一張則為左側那張
left: 0%;
bottom: 0%;
width: 75%;
z-index: 22;
}
&.end{ // 最后一張及右側那張
right: 0%;
bottom: 0%;
width: 75%;
z-index: 22;
}
&.normal{ // 此為隱藏圖片的樣式
left: 13%;
bottom: 0%;
width: 74%;
z-index: 11;
}
}
}
}
這樣最開始的位置就擺好了。
隱藏圖片的位置很重要,因為上面也說了,跨圖片滑動時需要改成跳出效果。大概在如下位置,展示的那張圖片完美的將其擋住。
接下來,進行事件添加。我們先不管輪播下方的一排導航點。先加上左右點擊操作。
在蒙板層加上onClick操作,(也可以加在slide層) 如下:
this.slide(item.name, key)} >{""}
點擊圖片時的方法
slide(name, key) { // 圖片點擊邏輯
// 記錄當前節點
this.setState({ current: key });
// 數組操作方法
this.imgArr(name);
}
數組操作方法
imgArr(name) { // 數組處理
let dirCopy = this.state.dir;
if (name === "start") { // 點擊左側那張
const pop = dirCopy.pop(); // 從數組尾部彈出一個元素
dirCopy.unshift(pop); // 尾部元素添加到數組頭部
} else if (name === "end") { // 點擊右側那張
const shift = dirCopy.shift(); // 從數組頭部彈出一個元素
dirCopy.push(shift); // 添加到數組尾部
}
this.setState({ dir: dirCopy }); // 保存重新排列的數組 并觸發render
}
過渡樣式添加
1.過渡樣式主要有旋轉時,蒙版層的漸變。
2.旋轉時平滑的定位過渡。
3.旋轉時層級的變化放在優化環節多帶帶講解。
.slide{
... , // 此處為原樣式保留的意思(下面都以此規則顯示)
transition: all 0.3s ease-in-out;
user-select: none; // 禁止用戶選中(防止圖片被選中時變色);
&:hover{ // 鼠標經過時顯示小手樣式
cursor: pointer;
}
}
.masking{
... ,
transition: all 0.3s 0.2s linear;
}
&.middle{
... ,
.masking{
background: transparent;
}
}
這個樣子的話點擊圖片左右兩側時就可以初步旋轉起來了。
到此為止的步驟所完成的樣式輪播為最基礎的‘旋轉木馬es6版本’,有需要的朋友已經可以在以上代碼中進行優化總結,放在自己的項目中去。
菜單按鈕開發
動態的根據圖片的數量循環出菜單按鈕的數量,代碼跟圖片循環類似。
... , {/* 導航按鈕*/}{ this.state.dir.map((item, key) => { // 根據圖片數量進行循環 return ( this.pointFunc(key - 1)} // 鼠標進入動畫 >{} ); }) }
樣式方面:
.point{
width: 100%;
position: absolute;
left: 0;
bottom: -23px;
z-index: 999;
text-align: center;
span{
display: inline-block;
width: 20px;
height: 3px;
background-color: #2E3033;
margin-left: 9px;
&.hover{
background-color: #7F8082;
}
&:hover{
cursor: pointer;
}
}
}
鼠標進入方法pointFunc();
pointFunc(index) { // 按鈕點擊
const { current } = this.state;
const dirCopy = this.state.dir;
if (index < current) { // 鼠標經過左側的按鈕
for (let i = 0; i < (current - index); i += 1) { // 判斷距離
const shift = dirCopy.shift(); // 進行數組操作
dirCopy.push(shift);
}
} else if (index > current) { // 鼠標經過右側的按鈕
for (let i = 0; i < (index - current); i += 1) {
const pop = dirCopy.pop();
dirCopy.unshift(pop);
}
}
this.setState({ dir: dirCopy }); // 觸發react-render重新渲染頁面
this.setState({ current: index }); // 記錄當前圖片節點
}
加完按鈕圖片后效果如下:
這個時候,核心效果已經出來了,經過嚴謹的布局和動畫調節后,最終達到了預期的網易播放器的特殊動畫效果。(鼠標經過相鄰的圖片時為滑動,經過不相鄰圖片按鈕的時候改為跳動效果)。
代碼效果
注:樣式方面還有需要優化的地方請自行調節
在這個組件模式開發時代,如果你做的東西不能保留下來并且開放出去,我認為是一件可悲的事情。所以下一篇文章將把此react組件進行開放式處理,開放一些可調節接口、響應式處理,并且最后打包成npm包,以插件的形式開放出去。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.hztianpu.com/yun/115686.html
摘要:說明此版本輪播圖為仿照網易云音樂播放器上首頁的輪播。網易的輪播特殊的地方就在于,如果你滑動不相鄰的兩張圖片,其過渡效果并不是滑動過渡,而是一個跳出過渡,此方面原理與最開始設計輪播排版時候有極大關聯。 說明: 此版本輪播圖為仿照網易云音樂PC播放器上首頁的輪播。 網易的輪播特殊的地方就在于,如果你滑動不相鄰的兩張圖片,其過渡效果并不是滑動過渡,而是一個跳出過渡,此方面原理與最開始設計輪播...
摘要:說明此版本輪播圖為仿照網易云音樂播放器上首頁的輪播。網易的輪播特殊的地方就在于,如果你滑動不相鄰的兩張圖片,其過渡效果并不是滑動過渡,而是一個跳出過渡,此方面原理與最開始設計輪播排版時候有極大關聯。 說明: 此版本輪播圖為仿照網易云音樂PC播放器上首頁的輪播。 網易的輪播特殊的地方就在于,如果你滑動不相鄰的兩張圖片,其過渡效果并不是滑動過渡,而是一個跳出過渡,此方面原理與最開始設計輪播...
摘要:目前只用到和音樂的輪播圖不用說,音樂這個網站的頁面我是真的挺喜歡,不光是他的設計,頁面的布局也很美觀,在控制臺調試的時候可以看看它的結構,非常有層次而富有美感,即使加上一層也不會有違和感。由于安全原因,跨域訪問是被各大瀏覽器所默認禁止的。 一直想做一個vue項目 然后呢 我就做了 效果預覽 部分地方不全部根據原版,也有自由發揮的,目前功能模塊比較簡陋,如果加載太慢,可以下載下來再本地運...
摘要:比如安卓平臺在中不能觸屏手動滾動。主要的功能界面模塊大部分主要是展示的,網易云的頁面和功能實在是太多了,由于時間關系,并沒有把所有的功能都做完整,后續會陸續加上其他的功能。各部分模塊首頁展示音樂播放,包括動畫,歌詞同步等。 React Native 模仿網易云音樂手機客戶端,兼容安卓和IOS兩個平臺。 GitHub 完整源碼地址https://github.com/yezihaohao...
閱讀 2789·2021-11-23 09:51
閱讀 737·2019-08-30 13:59
閱讀 2004·2019-08-29 11:20
閱讀 2676·2019-08-26 13:41
閱讀 3416·2019-08-26 12:16
閱讀 892·2019-08-26 10:59
閱讀 3509·2019-08-26 10:14
閱讀 751·2019-08-23 17:21