動(dòng)畫(huà)交互是讓你的用戶(hù)參與你的網(wǎng)站的東西。這讓他們不用語(yǔ)言就能交流。你知道他們?cè)趺凑f(shuō)一幅畫(huà)勝過(guò)千言萬(wàn)語(yǔ)嗎?通過(guò)你網(wǎng)站上的互動(dòng)，它將使一張圖片勝過(guò)百萬(wàn)字。這是Joomla行業(yè)從未見(jiàn)過(guò)的。頁(yè)面工廠(chǎng)就是這樣為您做的。使一些以前沒(méi)有人想象到的事情成為可能。
您可以使用與頁(yè)面工廠(chǎng)的動(dòng)畫(huà)交互賦予您的網(wǎng)站生命，讓網(wǎng)站充滿(mǎn)活力。
動(dòng)畫(huà)交互讓你(作為一個(gè)web開(kāi)發(fā)人員)釋放你的創(chuàng)造力，讓你做瘋狂的事情。與頁(yè)面工廠(chǎng)動(dòng)畫(huà)交互，你有一個(gè)全新的方式來(lái)創(chuàng)建實(shí)時(shí)運(yùn)動(dòng)效果在您的網(wǎng)站。它有一組強(qiáng)大的控件，可以讓您添加有吸引力的過(guò)渡和美麗的動(dòng)畫(huà)。
讓我們看看您可以使用全新的交互控件創(chuàng)建什么效果。
- 移動(dòng)
- 縮放
- 旋轉(zhuǎn)
- 傾斜
- 不透明度
- 模糊
- 3D旋轉(zhuǎn)
這些控件可以分為兩組設(shè)置。
滾動(dòng)效果：使用滾動(dòng)效果，您可以為訪(fǎng)問(wèn)者滾動(dòng)瀏覽網(wǎng)頁(yè)時(shí)創(chuàng)建動(dòng)畫(huà)。通過(guò)確定起點(diǎn)和終點(diǎn)來(lái)創(chuàng)建運(yùn)動(dòng)效果。
鼠標(biāo)效果：使用鼠標(biāo)效果，您可以為用戶(hù)將鼠標(biāo)懸停在特定元素上時(shí)創(chuàng)建過(guò)渡效果。
在進(jìn)一步深入了解之前，讓我們先了解在何處可以使用交互。基本上，網(wǎng)頁(yè)上到處都是。該特性在所有頁(yè)面工廠(chǎng)插件中都可用。進(jìn)入編輯模式后，選擇一個(gè)插件，你會(huì)發(fā)現(xiàn)“動(dòng)畫(huà)交互”控件就在“高級(jí)”選項(xiàng)卡旁邊。
為了有效地使用交互，您需要了解一些事情。通過(guò)動(dòng)畫(huà)交互，您可以為您的網(wǎng)站帶來(lái)生機(jī)。這意味著，您可以將動(dòng)畫(huà)效果應(yīng)用于您的內(nèi)容，以便在進(jìn)行交互時(shí)它們會(huì)動(dòng)態(tài)地做出反應(yīng)。現(xiàn)在我們需要了解控件的工作原理。
所有的效果都是由它們的軸值控制的，這里我們有x, y, z, x軸是水平的，y軸是垂直的，z是第三個(gè)同時(shí)垂直于x和y的軸。
時(shí)間軸:為了使控件更加友好，我們引入了時(shí)間軸。時(shí)間軸將視圖端口(網(wǎng)頁(yè)的可見(jiàn)區(qū)域)從0%劃分為100%。其中0%表示屏幕底部，50%表示屏幕中部，100%表示屏幕頂部。
所有交互效果還有一個(gè)共同的設(shè)置，變換x軸和y軸的原點(diǎn)。它作為效果的錨。您可以使用這些選項(xiàng)定義所有效果的起始點(diǎn)。
例如，如果您將x軸的原點(diǎn)設(shè)置為右，將y軸設(shè)置為底(請(qǐng)參考上面的視頻)。交互效果將從元素的右下角開(kāi)始操作。
移動(dòng)的效果
移動(dòng)效果允許您將附加組件從X和Y點(diǎn)移動(dòng)到定義的方向，其中X表示水平方向，Y表示垂直方向。對(duì)于這些控件，正值表示右(下)，負(fù)值表示左(上)。
還有一個(gè)z軸用于重新定位元素。它控制三維空間中的z軸，指定元素向內(nèi)或向外移動(dòng)的距離。透視CSS屬性用于通過(guò)將元素置于z軸上的較高位置來(lái)為場(chǎng)景(或?qū)ο?添加深度感。我們將透視圖的默認(rèn)值設(shè)置為1000。
縮放效應(yīng)
使用縮放效果，您可以使一個(gè)元素在其絕對(duì)位置方面變大或變小。正值使對(duì)象伸縮，負(fù)值使對(duì)象收縮。這里x軸控制水平縮放，y軸控制垂直縮放。
旋轉(zhuǎn)的效果
這種效果允許您旋轉(zhuǎn)一個(gè)元素。要查看運(yùn)動(dòng)中的旋轉(zhuǎn)，需要對(duì)時(shí)間軸執(zhí)行兩個(gè)旋轉(zhuǎn)效果。一個(gè)決定起點(diǎn)，另一個(gè)決定終點(diǎn)。對(duì)于垂直翻轉(zhuǎn)，需要改變x值;對(duì)于水平翻轉(zhuǎn)，需要改變y值;對(duì)于順時(shí)針或逆時(shí)針旋轉(zhuǎn)，需要改變z值。上面的視頻是一個(gè)順時(shí)針旋轉(zhuǎn)的例子。
傾斜效果
偏斜效應(yīng)使元素在二維空間上傾斜。意思是你可以使用偏斜效果使任何元素成為不均勻的平行四邊形。它有兩個(gè)控件，x軸的較高（正）值會(huì)使元素水平向右側(cè)傾斜，較低（負(fù)）值會(huì)使其向左側(cè)傾斜。類(lèi)似的效果也適用于y軸。歪斜效果的一個(gè)可能用例是，您可以使對(duì)象在2D表面中看起來(lái)在另一個(gè)上面。
不透明效果
使用Opacity，您可以管理元素的可見(jiàn)性。它只有一個(gè)控件，其中0使元素完全不可見(jiàn)，1使其完全可見(jiàn)。使用不透明度和其他效果可以使設(shè)計(jì)更有趣。上面給出了一個(gè)例子。這里我們?cè)谕粓D像上使用了不透明度，移動(dòng)和旋轉(zhuǎn)。
模糊效果
此效果用于使元素模糊。它只配備一個(gè)控件，值范圍為0-100。值越高，元素越不清晰，值越低，元素越清晰。效果有很多應(yīng)用，最好的一個(gè)是當(dāng)它出現(xiàn)在屏幕上時(shí)使元素模糊，并使其在聚焦點(diǎn)時(shí)更清晰。
傾斜效果
傾斜效果是3D鼠標(biāo)移動(dòng)效果。與其他效果類(lèi)似，它具有控制以確定您是否希望在移動(dòng)設(shè)備上看到效果。至于設(shè)置，傾斜的方向定義鼠標(biāo)懸停時(shí)會(huì)發(fā)生什么。前進(jìn)方向使元素向鼠標(biāo)移動(dòng)，而相反方向使元素向后移動(dòng)。
響應(yīng)性效果：響應(yīng)性是實(shí)現(xiàn)新功能時(shí)的首要任務(wù)之一。我們確保所有輸出都是響應(yīng)式的。同樣，所有頁(yè)面工廠(chǎng)的動(dòng)畫(huà)交互效果都是適合移動(dòng)設(shè)備的。如果您愿意，可以使用開(kāi)關(guān)在移動(dòng)設(shè)備/平板電腦設(shè)備上啟用互動(dòng)效果。
時(shí)間軸和使用多種效果的自由：頁(yè)面工廠(chǎng)的動(dòng)畫(huà)交互功能帶有一個(gè)時(shí)間軸區(qū)域，可讓您控制來(lái)自單個(gè)位置的所有交互效果。這是Joomla動(dòng)畫(huà)交互的最令人驚奇的功能之一是你可以根據(jù)需要在單個(gè)元素上使用多個(gè)交互效果。
交互作為一個(gè)獨(dú)立的功能：我們開(kāi)發(fā)了一種交互方式，在編輯時(shí)，動(dòng)畫(huà)交互功能只會(huì)在您創(chuàng)建/編輯交互效果時(shí)激活。這樣它就不會(huì)與其他造型效果發(fā)生沖突。
完整更新日志
- 新增功能：所有插件都添加了交互功能
- 新增：位置選項(xiàng)已添加到所有插件
- 新增：添加到表單生成器插件的按鈕包裝器自定義類(lèi)
- 更新：共享問(wèn)題已修復(fù)和共享計(jì)數(shù)選項(xiàng)已從社交共享插件中刪除
- 更新：刪除按鈕的文本依賴(lài)關(guān)系以更改選擇加入表格插件中的按鈕背景顏色
- 修復(fù)：在表單生成器插件中輸入類(lèi)型選擇高度問(wèn)題
- 修復(fù)：在表單生成器插件中輸入標(biāo)簽文本字體大小的響應(yīng)
- 修復(fù)：從表單生成器插件中的電子郵件不工作問(wèn)題
- 修復(fù)：聯(lián)系表單插件中的必填字段驗(yàn)證
- 修復(fù)：表格插件中的響應(yīng)模式問(wèn)題中的標(biāo)題重復(fù)
- 修復(fù)：圖像未從Divider插件中的外部URL問(wèn)題加載
- 修復(fù)：聯(lián)系表單插件中的電子郵件發(fā)送問(wèn)題
