模拟iphone slide to unlock 的聚光动画文字效果
/底层放淡文字
/前景放高亮文字+半透明遮罩
/动画移动遮罩
Author: surfsky.cnblogs.com 2015-02
Lisence: MIT, 请保留本文档说明
【先看效果】
【下载】
http://download.csdn.net/detail/surfsky/8448175
【核心代码】
// 背景文字(灰色) Text{ text: root.text font.pointSize: root.fontSize font.bold: root.fontBold color: 'gray' opacity: 0.5 } // 前景文字(白色) Text{ id: txt text: root.text font.pointSize: root.fontSize font.bold: root.fontBold color: 'white' visible: false } // 半透明遮罩 OpacityMask { id: effect txt.contentWidth; height: txt.contentHeight source: txt maskSource: gradient } // 用渐变做遮罩层 RadialGradient { id: gradient visible: false txt.contentWidth; height: txt.contentHeight horizontalRadius: width/2 verticalRadius: height*4/5 horizontalOffset: 0 gradient: Gradient{ GradientStop{position: 0.2; color:'white'} GradientStop{position: 0.8; color:'transparent'} } // 用动画移动遮罩 PropertyAnimation{ target: gradient properties: 'horizontalOffset' from: -gradient.width to: gradient.width + gradient.horizontalRadius duration: 2000 running: true loops: -1 } }
【使用方法】
1 ShineText{ 2 text: '> 滑动来解锁' 3 fontSize: 20 4 } 5 请在暗色背景区域测试该控件